文档

Browser.js图片处理

更新时间:

图片处理是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)。获取临时访问凭证的具体操作,请参见使用STS进行临时授权

使用图片处理参数处理图片

使用单个图片处理参数处理图片

<!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({
        // 从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({
        // 从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({
            // 从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({
        // 从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({
        // 从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的过期时间为600秒。
      const signUrl = client.signatureUrl("oss.png", {
        expires: 600,
        process: "image/resize,w_300",
      });
      console.log("signUrl=" + signUrl);
    </script>
  </body>
</html>

图片处理工具

您可以通过可视化图片处理工具ImageStyleViewer直观地看到OSS图片处理结果。

  • 本页导读 (1)
文档反馈