全部產品
Search
文件中心

Object Storage Service:Browser.js圖片處理

更新時間:Nov 13, 2024

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

使用圖片樣式處理圖片

  1. 建立圖片樣式。

    您可以在一個樣式(Style)中包含多個圖片處理參數,快速實現複雜的圖片處理操作。具體操作,請參見圖片樣式

  2. 使用圖片樣式處理圖片。

    <!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>