圖片處理是OSS提供的海量、安全、低成本、高可靠的圖片處理服務。原始圖片上傳到OSS后，您可以通過簡單的RESTful接口，在任何時間、任何地點、任何互聯網設備上對圖片進行處理。
注意事項
當您使用webpack或browserify等打包工具時，請通過npm install ali-oss的方式安裝Browser.js SDK。
通過瀏覽器訪問OSS時涉及跨域請求，如果未設置跨域規則，瀏覽器會拒絕跨域訪問請求。如果您希望通過瀏覽器可以正常訪問OSS，需要通過OSS設置跨域規則。具體操作，請參見準備工作。
由于Browser.js SDK通常在瀏覽器環境下使用，為避免暴露阿里云賬號訪問密鑰（AccessKey ID和AccessKey Secret），強烈建議您使用臨時訪問憑證的方式執行OSS相關操作。
臨時訪問憑證包括臨時訪問密鑰（AccessKey ID和AccessKey Secret）和安全令牌（SecurityToken）。獲取臨時訪問憑證的具體操作，請參見授權訪問。
使用圖片處理參數處理圖片
使用單個圖片處理參數處理圖片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<!--導入sdk文件-->
<script
type="text/javascript"
src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.18.0.min.js"
></script>
<script type="text/javascript">
const client = new OSS({
authorizationV4: true,
// 從STS服務獲取的臨時訪問密鑰（AccessKey ID和AccessKey Secret）。
accessKeyId: 'yourAccessKeyId',
accessKeySecret: 'yourAccessKeySecret',
// 從STS服務獲取的安全令牌（SecurityToken）。
stsToken: 'yourSecurityToken',
refreshSTSToken: async () => {
// 向您搭建的STS服務獲取臨時訪問憑證。
const info = await fetch("your_sts_server");
return {
accessKeyId: info.accessKeyId,
accessKeySecret: info.accessKeySecret,
stsToken: info.stsToken,
};
},
// 刷新臨時訪問憑證的時間間隔，單位為毫秒。
refreshSTSTokenInterval: 300000,
// 填寫Bucket名稱，例如examplebucket。
bucket: "examplebucket",
// yourRegion填寫Bucket所在地域。以華東1（杭州）為例，Region填寫為oss-cn-hangzhou。
region: "yourRegion",
});
// 將圖片縮放為固定寬高100 px。
async function scale() {
try {
// 填寫Object完整路徑，例如exampledir/exampleobject.jpg。Object完整路徑中不能包含Bucket名稱。
const result = await client.signatureUrl("exampledir/exampleobject.jpg", {
expires: 3600,
process: "image/resize,m_fixed,w_100,h_100",
});
console.log(result);
} catch (e) {
console.log(e);
}
}
scale();
</script>
</body>
</html>
使用多個圖片處理參數處理圖片
使用多個圖片處理參數處理圖片時，多個參數之間以正斜線（/）分隔。
!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<!--導入sdk文件-->
<script
type="text/javascript"
src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.18.0.min.js"
></script>
<script type="text/javascript">
const client = new OSS({
authorizationV4: true,
// 從STS服務獲取的臨時訪問密鑰（AccessKey ID和AccessKey Secret）。
accessKeyId: 'yourAccessKeyId',
accessKeySecret: 'yourAccessKeySecret',
// 從STS服務獲取的安全令牌（SecurityToken）。
stsToken: 'yourSecurityToken',
refreshSTSToken: async () => {
// 向您搭建的STS服務獲取臨時訪問憑證。
const info = await fetch("your_sts_server");
return {
accessKeyId: info.accessKeyId,
accessKeySecret: info.accessKeySecret,
stsToken: info.stsToken,
};
},
// 刷新臨時訪問憑證的時間間隔，單位為毫秒。
refreshSTSTokenInterval: 300000,
// 填寫Bucket名稱，例如examplebucket。
bucket: "examplebucket",
// yourRegion填寫Bucket所在地域。以華東1（杭州）為例，Region填寫為oss-cn-hangzhou。
region: "oss-cn-hangzhou",
});
// 將圖片縮放為固定寬高100 px后，再旋轉90°。
async function resize() {
try {
// 填寫Object完整路徑，例如exampledir/exampleobject.jpg。Object完整路徑中不能包含Bucket名稱。
const result = await client.signatureUrl("exampledir/exampleobject.jpg", {
expires: 3600,
process: "image/resize,m_fixed,w_100,h_100/rotate,90",
});
console.log(result);
} catch (e) {
console.log(e);
}
}
resize();
</script>
</body>
</html>
使用圖片樣式處理圖片
創建圖片樣式。
您可以在一個樣式（Style）中包含多個圖片處理參數，快速實現復雜的圖片處理操作。具體操作，請參見圖片樣式。
使用圖片樣式處理圖片。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>Document</title> </head> <body> <!--導入sdk文件--> <script type="text/javascript" src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.18.0.min.js" ></script> <script type="text/javascript"> const client = new OSS({ authorizationV4: true, // 從STS服務獲取的臨時訪問密鑰（AccessKey ID和AccessKey Secret）。 accessKeyId: 'yourAccessKeyId', accessKeySecret: 'yourAccessKeySecret', // 從STS服務獲取的安全令牌（SecurityToken）。 stsToken: 'yourSecurityToken', refreshSTSToken: async () => { // 向您搭建的STS服務獲取臨時訪問憑證。 const info = await fetch("your_sts_server"); return { accessKeyId: info.accessKeyId, accessKeySecret: info.accessKeySecret, stsToken: info.stsToken, }; }, // 刷新臨時訪問憑證的時間間隔，單位為毫秒。 refreshSTSTokenInterval: 300000, // 填寫Bucket名稱，例如examplebucket。 bucket: "examplebucket", // yourRegion填寫Bucket所在地域。以華東1（杭州）為例，Region填寫為oss-cn-hangzhou。 region: "oss-cn-hangzhou", }); // 將圖片縮放為固定寬高100 px后，再旋轉90°。 async function style() { try { // 填寫Object完整路徑，例如exampledir/exampleobject.jpg。Object完整路徑中不能包含Bucket名稱。 const result = await client.signatureUrl("exampledir/exampleobject.jpg", { expires: 3600, // yourCustomStyleName填寫步驟1創建的圖片樣式名稱。 process: "style/yourCustomStyleName", }); console.log(result); } catch (e) { console.log(e); } } style(); </script> </body> </html>
圖片處理持久化
圖片處理服務默認不保存處理后的圖片，您可以通過圖片處理持久化操作將處理后的圖片保存到原圖所在Bucket。
以下代碼用于圖片處理持久化。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<!--導入sdk文件-->
<script
type="text/javascript"
src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.18.0.min.js"
></script>
<script type="text/javascript">
const client = new OSS({
authorizationV4: true,
// 從STS服務獲取的臨時訪問密鑰（AccessKey ID和AccessKey Secret）。
accessKeyId: 'yourAccessKeyId',
accessKeySecret: 'yourAccessKeySecret',
// 從STS服務獲取的安全令牌（SecurityToken）。
stsToken: 'yourSecurityToken',
refreshSTSToken: async () => {
// 向您搭建的STS服務獲取臨時訪問憑證。
const info = await fetch("your_sts_server");
return {
accessKeyId: info.accessKeyId,
accessKeySecret: info.accessKeySecret,
stsToken: info.stsToken,
};
},
// 刷新臨時訪問憑證的時間間隔，單位為毫秒。
refreshSTSTokenInterval: 300000,
// 填寫Bucket名稱，例如examplebucket。
bucket: "examplebucket",
// yourRegion填寫Bucket所在地域。以華東1（杭州）為例，Region填寫為oss-cn-hangzhou。
region: "oss-cn-hangzhou",
});
// 填寫源Object完整路徑，例如exampledir/src.png。Object完整路徑中不能包含Bucket名稱。
const sourceImage = "exampledir/src.png";
// 填寫圖片處理后的目標Object完整路徑，例如exampledir/dest.png。Object完整路徑中不能包含Bucket名稱。
const targetImage = "exampledir/dest.png";
async function processImage(processStr, targetBucket) {
const result = await client.processObjectSave(
sourceImage,
targetImage,
processStr,
targetBucket
);
console.log(result.res.status);
}
// 將原圖縮放為固定寬高100 px并保存到原圖所在Bucket。
processImage("image/resize,m_fixed,w_100,h_100", "examplebucket");
</script>
</body>
</html>
生成帶圖片處理參數的文件簽名URL
通過文件URL訪問私有權限文件時需要攜帶簽名。OSS不支持在帶簽名的URL后直接添加圖片處理參數。如果您需要對私有權限的圖片進行處理，您需要將圖片處理參數加入到簽名中，代碼示例如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body>
<!--導入sdk文件-->
<script
type="text/javascript"
src="https://gosspublic.alicdn.com/aliyun-oss-sdk-6.18.0.min.js"
></script>
<script type="text/javascript">
const client = new OSS({
authorizationV4: true,
// 從STS服務獲取的臨時訪問密鑰（AccessKey ID和AccessKey Secret）。
accessKeyId: 'yourAccessKeyId',
accessKeySecret: 'yourAccessKeySecret',
// 從STS服務獲取的安全令牌（SecurityToken）。
stsToken: 'yourSecurityToken',
refreshSTSToken: async () => {
// 向您搭建的STS服務獲取臨時訪問憑證。
const info = await fetch("your_sts_server");
return {
accessKeyId: info.accessKeyId,
accessKeySecret: info.accessKeySecret,
stsToken: info.stsToken,
};
},
// 刷新臨時訪問憑證的時間間隔，單位為毫秒。
refreshSTSTokenInterval: 300000,
// 填寫Bucket名稱，例如examplebucket。
bucket: "examplebucket",
// yourRegion填寫Bucket所在地域。以華東1（杭州）為例，Region填寫為oss-cn-hangzhou。
region: "oss-cn-hangzhou",
});
// 生成帶圖片處理參數的文件簽名URL，并設置簽名URL的過期時間為600s（最長過期時間為32400s）。
const signUrl = client.signatureUrl("oss.png", {
expires: 600,
process: "image/resize,w_300",
});
console.log("signUrl=" + signUrl);
</script>
</body>
</html>
圖片處理工具
您可以通過可視化圖片處理工具ImageStyleViewer直觀地看到OSS圖片處理結果。
文檔內容是否對您有幫助？