全部产品
Search

搜索本产品

    对象存储 OSS：Node.js图片处理

    文档中心

    对象存储 OSS：Node.js图片处理

    更新时间：Oct 31, 2024

    图片处理是OSS提供的海量、安全、低成本、高可靠的图片处理服务。原始图片上传到OSS后，您可以通过简单的RESTful接口，在任何时间、任何地点、任何互联网设备上对图片进行处理。

    图片处理使用

    图片处理使用标准的HTTP GET请求。您可以在URL的QueryString中设置处理参数。

    如果图片文件的访问权限为私有，必须通过授权才能进行访问。

    • 匿名访问

      如果图片文件（Object）的访问权限是公共读，如下表所示的权限，则可以匿名访问图片服务。

      Bucket权限

      Object权限

      公共读私有写（public-read）或公共读写（public-read-write）

      默认（default）

      任意权限

      公共读私有写（public-read）或公共读写（public-read-write）

      您可以通过如下格式的三级域名匿名访问处理后的图片：

      http://<yourBucketName>.<yourEndpoint>/<yourObjectName>?x-oss-process=image/<yourAction>,<yourParamValue>

      参数

      描述

      yourBucketName

      存储空间名称

      yourEndpoint

      存储空间所在地域的访问域名

      yourObjectName

      图片文件名称

      image

      图片处理的保留标志符

      yourAction

      对图片做的操作，如缩放、裁剪、旋转等

      yourParamValue

      对图片做的操作所对应的参数

      • 基础操作

        例如，将图缩略成宽度为100，高度按比例处理：

        http://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=image/resize,w_100

      • 自定义样式

        使用如下格式的三级域名匿名访问图片处理：

        http://<yourBucketName>.<yourEndpoint>/<yourObjectName>?x-oss-process=style/<yourStyleName>

        • style：自定义样式的保留标志符。

        • yourStyleName：自定义样式名称，即通过控制台自定义样式的规则名称。

        例如：

        http://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=style/oss-pic-style-w-100

      • 级联处理

        通过级联处理，可以对一张图片顺序进行多个操作，格式如下：

        http://<yourBucketName>.<yourEndpoint>/<yourObjectName>?x-oss-process=image/<yourAction1>,<yourParamValue1>/<yourAction2>,<yourParamValue2>/...

        例如：

        http://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=image/resize,w_100/rotate,90

      • 支持HTTPS访问

        图片服务支持HTTPS访问，例如：

        https://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=image/resize,w_100

    • 授权访问

      对私有权限的文件（Object），如下表所示的权限，必须通过授权才能访问图片服务。

      Bucket权限

      Object权限

      私有（private）

      默认权限（default）

      任意权限

      私有（private）

      以下代码用于生成带签名的图片处理URL：

      const OSS = require("ali-oss");

const client = new OSS({
  // yourregion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。
  region: "oss-cn-hangzhou",
  // 从环境变量中获取访问凭证。运行本代码示例之前，请确保已设置环境变量OSS_ACCESS_KEY_ID和OSS_ACCESS_KEY_SECRET。
  accessKeyId: process.env.OSS_ACCESS_KEY_ID,
  accessKeySecret: process.env.OSS_ACCESS_KEY_SECRET,
  authorizationV4: true,
  // yourbucketname填写存储空间名称。
  bucket: "examplebucket",
});
// 过期时间10分钟,图片处理式样"image/resize,w_300"。
const signUrl = client.signatureUrl("example.png", {
  expires: 600,
  process: "image/resize,w_300",
});
console.log("signUrl=" + signUrl);
      说明

      • 授权访问支持自定义样式、HTTPS、以及级联处理。

      • 指定过期时间expires的单位是秒。

    • SDK访问

      对于任意权限的图片文件，都可以直接使用SDK访问和处理。

      SDK处理图片文件支持自定义样式、HTTPS和级联处理。

      • 基础操作

        以下代码展示了图片处理的基础操作：

        const OSS = require('ali-oss');

const client = new OSS({
  // yourregion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。
  region: 'yourregion',
  // 从环境变量中获取访问凭证。运行本代码示例之前，请确保已设置环境变量OSS_ACCESS_KEY_ID和OSS_ACCESS_KEY_SECRET。
  accessKeyId: process.env.OSS_ACCESS_KEY_ID,
  accessKeySecret: process.env.OSS_ACCESS_KEY_SECRET,
  authorizationV4: true,
  // yourbucketname填写存储空间名称。
  bucket: 'yourbucketname'
});

// 将图片缩放为固定宽高100 px。
async function scale() {
  try {
    const result = await client.get('example.jpg', './example-resize.jpg', { process: 'image/resize,m_fixed,w_100,h_100'});
  } catch (e) {
    console.log(e);
  }
}

scale()

// 从坐标（100,100）开始，将图片裁剪为宽高100 px。
async function cut() {
  try {
     const result = await client.get('example.jpg', './example-crop.jpg', { process: 'image/crop,w_100,h_100,x_100,y_100,r_1'});
  } catch (e) {
    console.log(e)
  }
}

cut()

// 将图片旋转90°。
async function rotate() {
  try {
    const result = await client.get('example.jpg', './example-rotate.jpg', { process: 'image/rotate,90'});
  } catch (e) {
    console.log(e);
  }
}

rotate()

// 将图片进行锐化，锐化参数为100。
async function sharpen() {
  try {
    const result = await client.get('example.jpg', './example-sharpen.jpg', { process: 'image/sharpen,100'});
  } catch (e) {
    console.log(e);
  }
}

sharpen()

// 在图片中添加水印。
async function watermark() {
  try {
    const result = await client.get('example.jpg', './example-watermark.jpg', { process: 'image/watermark,text_SGVsbG8g5Zu-54mH5pyN5YqhIQ'});
  } catch (e) {
    console.log(e);
  }
}

watermark()

// 将图片进行格式转换。
async function format() {
  try {
    const result = await client.get('example.jpg', './example-format.jpg', { process: 'image/format,png'});
  } catch (e) {
    console.log(e);
  }
}

format()

// 获取图片信息。
async function info() {
  try {
    const result = await client.get('example.jpg', './example-info.txt', {process: 'image/info'});
  } catch (e) {
    console.log(e);
  }
}

info()

      • 自定义样式

        说明

        需要事先到OSS控制台添加自定义式样example-style。

        以下代码用于自定义图片样式：

        const OSS = require('ali-oss');

const client = new OSS({
  // yourregion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。
  region: 'yourregion',
  // 从环境变量中获取访问凭证。运行本代码示例之前，请确保已设置环境变量OSS_ACCESS_KEY_ID和OSS_ACCESS_KEY_SECRET。
  accessKeyId: process.env.OSS_ACCESS_KEY_ID,
  accessKeySecret: process.env.OSS_ACCESS_KEY_SECRET,
  authorizationV4: true,
  // yourbucketname填写存储空间名称。
  bucket: 'yourbucketname'
});

// 将图片缩放为固定宽高100 px。
async function scale() {
  try {
    const result = await client.get('example.jpg', './example-resize.jpg', { process: 'image/resize,m_fixed,w_100,h_100'});
  } catch (e) {
    console.log(e);
  }
}

scale()

// 从坐标（100,100）开始，将图片裁剪为宽高100 px。
async function cut() {
  try {
     const result = await client.get('example.jpg', './example-crop.jpg', { process: 'image/crop,w_100,h_100,x_100,y_100,r_1'});
  } catch (e) {
    console.log(e)
  }
}

cut()

// 将图片旋转90°。
async function rotate() {
  try {
    const result = await client.get('example.jpg', './example-rotate.jpg', { process: 'image/rotate,90'});
  } catch (e) {
    console.log(e);
  }
}

rotate()

// 将图片进行锐化，锐化参数为100。
async function sharpen() {
  try {
    const result = await client.get('example.jpg', './example-sharpen.jpg', { process: 'image/sharpen,100'});
  } catch (e) {
    console.log(e);
  }
}

sharpen()

// 在图片中添加水印。
async function watermark() {
  try {
    const result = await client.get('example.jpg', './example-watermark.jpg', { process: 'image/watermark,text_SGVsbG8g5Zu-54mH5pyN5YqhIQ'});
  } catch (e) {
    console.log(e);
  }
}

watermark()

// 将图片进行格式转换。
async function format() {
  try {
    const result = await client.get('example.jpg', './example-format.jpg', { process: 'image/format,png'});
  } catch (e) {
    console.log(e);
  }
}

format()

// 获取图片信息。
async function info() {
  try {
    const result = await client.get('example.jpg', './example-info.txt', {process: 'image/info'});
  } catch (e) {
    console.log(e);
  }
}

info()

      • 级联处理

        以下代码用于级联处理图片：

        const OSS = require('ali-oss');

const client = new OSS({
  // yourregion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。
  region: 'yourregion',
  // 从环境变量中获取访问凭证。运行本代码示例之前，请确保已设置环境变量OSS_ACCESS_KEY_ID和OSS_ACCESS_KEY_SECRET。
  accessKeyId: process.env.OSS_ACCESS_KEY_ID,
  accessKeySecret: process.env.OSS_ACCESS_KEY_SECRET,
  authorizationV4: true,
  // yourbucketname填写存储空间名称。
  bucket: 'yourbucketname'
});

// 级联处理
async function cascade () {
  try {
    const result = await client.get('example.jpg', './example-cascade.jpg', {process: 'image/resize,m_fixed,w_100,h_100/rotate,90'});
  } catch (e) {
    console.log(e);
  }
}
cascade();

    图片处理持久化

    以下代码用于图片处理持久化：

    const OSS = require('ali-oss');

const client = new OSS({
  // yourregion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。
  region: 'yourregion',
  // 从环境变量中获取访问凭证。运行本代码示例之前，请确保已设置环境变量OSS_ACCESS_KEY_ID和OSS_ACCESS_KEY_SECRET。
  accessKeyId: process.env.OSS_ACCESS_KEY_ID,
  accessKeySecret: process.env.OSS_ACCESS_KEY_SECRET,
  authorizationV4: true,
  // yourbucketname填写存储空间名称。
  bucket: 'yourbucketname'
});

const sourceImage = 'sourceObject.png';
const targetImage = 'targetObject.jpg';
async function processImage(processStr, targetBucket) {
  const result = await client.processObjectSave(
    sourceImage,
    targetImage,
    processStr,
    targetBucket
  );
  console.log(result.res.status);
}

// 图片处理持久化：缩放，并设置保存图片处理持久化结果的目标bucket。
processImage("image/resize,m_fixed,w_100,h_100", "target bucket")

// 图片处理持久化：裁剪，并设置保存图片处理持久化结果的目标bucket。
processImage("image/crop,w_100,h_100,x_100,y_100,r_1", "target bucket")

// 图片处理持久化：旋转，并设置保存图片处理持久化结果的目标bucket。
processImage("image/rotate,90", "target bucket")

// 图片处理持久化：锐化，并设置保存图片处理持久化结果的目标bucket。
processImage("image/sharpen,100", "target bucket")

// 图片处理持久化：水印，并设置保存图片处理持久化结果的目标bucket。
processImage("image/watermark,text_SGVsbG8g5Zu-54mH5pyN5YqhIQ", "target bucket")

// 图片处理持久化：格式转换，并设置保存图片处理持久化结果的目标bucket。
processImage("image/format,jpg", "target bucket")

// 图片处理持久化：格式转换，并设置保存图片处理持久化结果的目标bucket。
processImage("image/format,jpg", "target bucket")

    相关文档

    • 关于图片处理支持的参数说明，请参见处理参数。

    • 关于图片处理的完整示例代码，请参见GitHub示例。