Node.js圖片處理

圖片處理是OSS提供的海量、安全、低成本、高可靠的圖片處理服務。原始圖片上傳到OSS後，您可以通過簡單的RESTful介面，在任何時間、任何地點、任何互連網裝置上對圖片進行處理。

圖片處理使用

圖片處理使用標準的HTTP GET請求。您可以在URL的QueryString中設定處理參數。

如果圖片檔案的存取權限為私人，必須通過授權才能進行訪問。

匿名訪問

如果圖片檔案（Object）的存取權限是公用讀取，如下表所示的許可權，則可以匿名訪問圖片服務。

Bucket許可權	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許可權

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")

圖片處理使用

圖片處理持久化

相關文檔

銷售支援

技術支援

聯絡我們 & 報告濫用行為