圖片處理是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>