Process images using the Browser.js SDK - Object Storage Service

Görüntü işleme, OSS tarafından sunulan ölçeklenebilir, güvenli, maliyet etkin ve son derece güvenilir bir hizmettir. Bir görüntüyü OSS'e yükledikten sonra basit RESTful arayüzler kullanarak internet bağlantısı olan herhangi bir cihazda bu görüntüyü işleyebilirsiniz.

Kullanım notları

Webpack ve Browserify gibi paketleme araçlarını kullanırken npm install ali-oss komutunu çalıştırarak Browser.js için OSS SDK'yı yükleyin.
Bir tarayıcıdan bir OSS paketine erişmek istiyorsanız ancak paket için CORS kuralları yapılandırılmamışsa tarayıcı isteği reddeder. Bu nedenle, bir pakete tarayıcıdan erişmek için paketin CORS kurallarını yapılandırmanız gerekir. Daha fazla bilgi için bkz. Kurulum.
Browser.js için OSS SDK çoğunlukla tarayıcılarda kullanılır. AccessKey çiftinizin açığa çıkmasını önlemek amacıyla OSS'e erişirken Security Token Service'ten (STS) elde edilen geçici erişim kimlik bilgilerini kullanmanızı öneririz.

Geçici erişim kimlik bilgileri bir AccessKey çifti ve bir güvenlik belirtecinden oluşur. AccessKey çifti bir AccessKey ID ve bir AccessKey Secret içerir. Geçici erişim kimlik bilgilerinin nasıl alınacağı hakkında daha fazla bilgi için bkz. Geçici erişim yetkilendirmesi için STS kullanma.

Görüntü işleme parametrelerini kullanarak görüntüleri işleme

Tek bir görüntü işleme parametresi kullanarak görüntü işleme

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>

  <body>
    <!--Import the SDK file.-->
    <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,
        // Obtain a temporary AccessKey pair (AccessKey ID and AccessKey secret) from the STS service.
        accessKeyId: 'yourAccessKeyId',
        accessKeySecret: 'yourAccessKeySecret',
        // Obtain a security token (SecurityToken) from the STS service.
        stsToken: 'yourSecurityToken',
        refreshSTSToken: async () => {
          // Obtain temporary access credentials from your STS service.
          const info = await fetch("your_sts_server");
          return {
            accessKeyId: info.accessKeyId,
            accessKeySecret: info.accessKeySecret,
            stsToken: info.stsToken,
          };
        },
        // The interval to refresh temporary access credentials. Unit: milliseconds.
        refreshSTSTokenInterval: 300000,
        // Specify the bucket name. For example, examplebucket.
        bucket: "examplebucket",
        // Replace yourRegion with the region where the bucket is located. For example, if the bucket is in the China (Hangzhou) region, set the region to oss-cn-hangzhou.
        region: "yourRegion",
      });

      // Scale the image to a fixed width and height of 100 px.
      async function scale() {
        try {
          // Specify the full path of the object. For example, exampledir/exampleobject.jpg. The full path cannot contain the bucket name.
          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>

Birden çok görüntü işleme parametresi kullanarak görüntü işleme

Birden çok görüntü işleme parametresi kullanmak için parametreleri eğik çizgi (/) ile ayırın.

!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>

  <body>
    <!--Import the SDK file.-->
    <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,
        // Obtain a temporary AccessKey pair (AccessKey ID and AccessKey secret) from the STS service.
        accessKeyId: 'yourAccessKeyId',
        accessKeySecret: 'yourAccessKeySecret',
        // Obtain a security token (SecurityToken) from the STS service.
        stsToken: 'yourSecurityToken',
        refreshSTSToken: async () => {
          // Obtain temporary access credentials from your STS service.
          const info = await fetch("your_sts_server");
          return {
            accessKeyId: info.accessKeyId,
            accessKeySecret: info.accessKeySecret,
            stsToken: info.stsToken,
          };
        },
        // The interval to refresh temporary access credentials. Unit: milliseconds.
        refreshSTSTokenInterval: 300000,
        // Specify the bucket name. For example, examplebucket.
        bucket: "examplebucket",
        // Replace yourRegion with the region where the bucket is located. For example, if the bucket is in the China (Hangzhou) region, set the region to oss-cn-hangzhou.
        region: "oss-cn-hangzhou",
      });

      // Scale the image to a fixed width and height of 100 px, and then rotate it by 90 degrees.
      async function resize() {
        try {
          // Specify the full path of the object. For example, exampledir/exampleobject.jpg. The full path cannot contain the bucket name.
          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>

Görüntü stillerini kullanarak görüntüleri işleme

Bir görüntü stili oluşturun.

Karmaşık görüntü işleme işlemleri yapmak için bir stile birden çok görüntü işleme parametresi ekleyebilirsiniz. Daha fazla bilgi için bkz. Görüntü stilleri.

Görüntü stilini kullanarak bir görüntü işleyin.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>

  <body>
    <!--Import the SDK file.-->
    <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,
        // Obtain a temporary AccessKey pair (AccessKey ID and AccessKey secret) from the STS service.
        accessKeyId: 'yourAccessKeyId',
        accessKeySecret: 'yourAccessKeySecret',
        // Obtain a security token (SecurityToken) from the STS service.
        stsToken: 'yourSecurityToken',
        refreshSTSToken: async () => {
          // Obtain temporary access credentials from your STS service.
          const info = await fetch("your_sts_server");
          return {
            accessKeyId: info.accessKeyId,
            accessKeySecret: info.accessKeySecret,
            stsToken: info.stsToken,
          };
        },
        // The interval to refresh temporary access credentials. Unit: milliseconds.
        refreshSTSTokenInterval: 300000,
        // Specify the bucket name. For example, examplebucket.
        bucket: "examplebucket",
        // Replace yourRegion with the region where the bucket is located. For example, if the bucket is in the China (Hangzhou) region, set the region to oss-cn-hangzhou.
        region: "oss-cn-hangzhou",
      });

      // Scale the image to a fixed width and height of 100 px, and then rotate it by 90 degrees.
      async function style() {
        try {
          // Specify the full path of the object. For example, exampledir/exampleobject.jpg. The full path cannot contain the bucket name.
          const result = await client.signatureUrl("exampledir/exampleobject.jpg", {
            expires: 3600,
            // Replace yourCustomStyleName with the name of the image style that you created in Step 1.
            process: "style/yourCustomStyleName",
          });
          console.log(result);
        } catch (e) {
          console.log(e);
        }
      }

      style();
    </script>
  </body>
</html>

Görüntü işleme kalıcılığı

Varsayılan olarak görüntü işleme hizmeti işlenmiş görüntüleri kaydetmez. İşlenmiş bir görüntüyü kaynak görüntüyle aynı pakete kaydetmek için görüntü işleme kalıcılığı özelliğini kullanabilirsiniz.

Aşağıdaki kod, görüntü işleme kalıcılığının nasıl kullanılacağını gösteren bir örnektir.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>

  <body>
    <!--Import the SDK file.-->
    <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,
        // Obtain a temporary AccessKey pair (AccessKey ID and AccessKey secret) from the STS service.
        accessKeyId: 'yourAccessKeyId',
        accessKeySecret: 'yourAccessKeySecret',
        // Obtain a security token (SecurityToken) from the STS service.
        stsToken: 'yourSecurityToken',
        refreshSTSToken: async () => {
          // Obtain temporary access credentials from your STS service.
          const info = await fetch("your_sts_server");
          return {
            accessKeyId: info.accessKeyId,
            accessKeySecret: info.accessKeySecret,
            stsToken: info.stsToken,
          };
        },
        // The interval to refresh temporary access credentials. Unit: milliseconds.
        refreshSTSTokenInterval: 300000,
        // Specify the bucket name. For example, examplebucket.
        bucket: "examplebucket",
        // Replace yourRegion with the region where the bucket is located. For example, if the bucket is in the China (Hangzhou) region, set the region to oss-cn-hangzhou.
        region: "oss-cn-hangzhou",
      });

      // Specify the full path of the source object. For example, exampledir/src.png. The full path cannot contain the bucket name.
      const sourceImage = "exampledir/src.png";
      // Specify the full path of the destination object for the processed image. For example, exampledir/dest.png. The full path cannot contain the bucket name.
      const targetImage = "exampledir/dest.png";
      async function processImage(processStr, targetBucket) {
        const result = await client.processObjectSave(
          sourceImage,
          targetImage,
          processStr,
          targetBucket
        );
        console.log(result.res.status);
      }

      // Scale the source image to a fixed width and height of 100 px and save it to the source bucket.
      processImage("image/resize,m_fixed,w_100,h_100", "examplebucket");
    </script>
  </body>
</html>

Görüntü işleme parametreleri içeren bir dosya için imzalı URL oluşturma

Özel bir dosyaya URL'si üzerinden eriştiğinizde imza gerekir. İmzalı bir URL'ye doğrudan görüntü işleme parametreleri ekleyemezsiniz. Özel bir görüntüyü işlemek için görüntü işleme parametrelerini imzaya eklemeniz gerekir. Aşağıdaki kod bir örnek sunar:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
  </head>

  <body>
    <!--Import the SDK file.-->
    <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,
        // Obtain a temporary AccessKey pair (AccessKey ID and AccessKey secret) from the STS service.
        accessKeyId: 'yourAccessKeyId',
        accessKeySecret: 'yourAccessKeySecret',
        // Obtain a security token (SecurityToken) from the STS service.
        stsToken: 'yourSecurityToken',
        refreshSTSToken: async () => {
          // Obtain temporary access credentials from your STS service.
          const info = await fetch("your_sts_server");
          return {
            accessKeyId: info.accessKeyId,
            accessKeySecret: info.accessKeySecret,
            stsToken: info.stsToken,
          };
        },
        // The interval to refresh temporary access credentials. Unit: milliseconds.
        refreshSTSTokenInterval: 300000,
        // Specify the bucket name. For example, examplebucket.
        bucket: "examplebucket",
        // Replace yourRegion with the region where the bucket is located. For example, if the bucket is in the China (Hangzhou) region, set the region to oss-cn-hangzhou.
        region: "oss-cn-hangzhou",
      });

      // Generate a signed URL for a file with image processing parameters and set the expiration time of the signed URL to 600s. The maximum expiration time is 32400s.
      const signUrl = client.signatureUrl("oss.png", {
        expires: 600,
        process: "image/resize,w_300",
      });
      console.log("signUrl=" + signUrl);
    </script>
  </body>
</html>