Proses citra menggunakan Browser.js SDK - Object Storage Service

Pemrosesan citra adalah layanan yang scalable, aman, hemat biaya, dan sangat andal yang ditawarkan oleh OSS. Setelah mengunggah citra ke OSS, Anda dapat memprosesnya dari perangkat apa pun yang terhubung ke internet melalui antarmuka RESTful yang sederhana.

Catatan penggunaan

Saat menggunakan alat packaging seperti Webpack dan Browserify, instal OSS SDK untuk Browser.js dengan menjalankan perintah npm install ali-oss.
Jika Anda ingin mengakses bucket OSS dari browser tetapi bucket tersebut belum dikonfigurasi dengan aturan CORS, browser akan menolak permintaan tersebut. Oleh karena itu, Anda harus mengonfigurasi aturan CORS pada bucket untuk mengizinkan akses dari browser. Untuk informasi selengkapnya, lihat Instalasi.
Dalam sebagian besar kasus, OSS SDK untuk Browser.js digunakan di browser. Untuk mencegah pasangan AccessKey Anda terekspos, kami menyarankan agar Anda menggunakan kredensial akses temporary yang diperoleh dari Security Token Service (STS) untuk mengakses OSS.
Kredensial akses temporary terdiri atas pasangan AccessKey dan token keamanan. Pasangan AccessKey mencakup ID AccessKey dan Rahasia AccessKey. Untuk informasi selengkapnya tentang cara memperoleh kredensial akses temporary, lihat Gunakan STS untuk otorisasi akses temporary.

Proses citra menggunakan parameter pemrosesan citra

Proses citra menggunakan satu parameter pemrosesan citra

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

  <body>
    <!--Impor file 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,
        // Dapatkan pasangan AccessKey temporary (ID AccessKey dan Rahasia AccessKey) dari layanan STS.
        accessKeyId: 'yourAccessKeyId',
        accessKeySecret: 'yourAccessKeySecret',
        // Dapatkan token keamanan (SecurityToken) dari layanan STS.
        stsToken: 'yourSecurityToken',
        refreshSTSToken: async () => {
          // Dapatkan kredensial akses temporary dari layanan STS Anda.
          const info = await fetch("your_sts_server");
          return {
            accessKeyId: info.accessKeyId,
            accessKeySecret: info.accessKeySecret,
            stsToken: info.stsToken,
          };
        },
        // Interval penyegaran kredensial akses temporary. Satuan: milidetik.
        refreshSTSTokenInterval: 300000,
        // Tentukan nama bucket. Contohnya, examplebucket.
        bucket: "examplebucket",
        // Ganti yourRegion dengan wilayah tempat bucket berada. Misalnya, jika bucket berada di wilayah China (Hangzhou), atur region menjadi oss-cn-hangzhou.
        region: "yourRegion",
      });

      // Ubah ukuran citra menjadi lebar dan tinggi tetap 100 px.
      async function scale() {
        try {
          // Tentukan path lengkap objek. Contohnya, exampledir/exampleobject.jpg. Path lengkap tidak boleh mengandung nama 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>

Proses citra menggunakan beberapa parameter pemrosesan citra

Untuk menggunakan beberapa parameter pemrosesan citra, pisahkan parameter tersebut dengan garis miring (/).

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

  <body>
    <!--Impor file 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,
        // Dapatkan pasangan AccessKey temporary (ID AccessKey dan Rahasia AccessKey) dari layanan STS.
        accessKeyId: 'yourAccessKeyId',
        accessKeySecret: 'yourAccessKeySecret',
        // Dapatkan token keamanan (SecurityToken) dari layanan STS.
        stsToken: 'yourSecurityToken',
        refreshSTSToken: async () => {
          // Dapatkan kredensial akses temporary dari layanan STS Anda.
          const info = await fetch("your_sts_server");
          return {
            accessKeyId: info.accessKeyId,
            accessKeySecret: info.accessKeySecret,
            stsToken: info.stsToken,
          };
        },
        // Interval penyegaran kredensial akses temporary. Satuan: milidetik.
        refreshSTSTokenInterval: 300000,
        // Tentukan nama bucket. Contohnya, examplebucket.
        bucket: "examplebucket",
        // Ganti yourRegion dengan wilayah tempat bucket berada. Misalnya, jika bucket berada di wilayah China (Hangzhou), atur region menjadi oss-cn-hangzhou.
        region: "oss-cn-hangzhou",
      });

      // Ubah ukuran citra menjadi lebar dan tinggi tetap 100 px, lalu putar sebesar 90 derajat.
      async function resize() {
        try {
          // Tentukan path lengkap objek. Contohnya, exampledir/exampleobject.jpg. Path lengkap tidak boleh mengandung nama 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>

Proses citra menggunakan gaya citra

Buat gaya citra.
Anda dapat menambahkan beberapa parameter pemrosesan citra ke dalam satu gaya untuk melakukan operasi pemrosesan citra yang kompleks. Untuk informasi selengkapnya, lihat Gaya citra.

Proses citra menggunakan gaya citra tersebut.

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

  <body>
    <!--Impor file 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,
        // Dapatkan pasangan AccessKey temporary (ID AccessKey dan Rahasia AccessKey) dari layanan STS.
        accessKeyId: 'yourAccessKeyId',
        accessKeySecret: 'yourAccessKeySecret',
        // Dapatkan token keamanan (SecurityToken) dari layanan STS.
        stsToken: 'yourSecurityToken',
        refreshSTSToken: async () => {
          // Dapatkan kredensial akses temporary dari layanan STS Anda.
          const info = await fetch("your_sts_server");
          return {
            accessKeyId: info.accessKeyId,
            accessKeySecret: info.accessKeySecret,
            stsToken: info.stsToken,
          };
        },
        // Interval penyegaran kredensial akses temporary. Satuan: milidetik.
        refreshSTSTokenInterval: 300000,
        // Tentukan nama bucket. Contohnya, examplebucket.
        bucket: "examplebucket",
        // Ganti yourRegion dengan wilayah tempat bucket berada. Misalnya, jika bucket berada di wilayah China (Hangzhou), atur region menjadi oss-cn-hangzhou.
        region: "oss-cn-hangzhou",
      });

      // Ubah ukuran citra menjadi lebar dan tinggi tetap 100 px, lalu putar sebesar 90 derajat.
      async function style() {
        try {
          // Tentukan path lengkap objek. Contohnya, exampledir/exampleobject.jpg. Path lengkap tidak boleh mengandung nama bucket.
          const result = await client.signatureUrl("exampledir/exampleobject.jpg", {
            expires: 3600,
            // Ganti yourCustomStyleName dengan nama gaya citra yang Anda buat pada Langkah 1.
            process: "style/yourCustomStyleName",
          });
          console.log(result);
        } catch (e) {
          console.log(e);
        }
      }

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

Persistensi pemrosesan citra

Secara default, layanan pemrosesan citra tidak menyimpan citra yang telah diproses. Anda dapat menggunakan fitur persistensi pemrosesan citra untuk menyimpan citra hasil pemrosesan ke bucket yang sama dengan citra sumber.

Kode berikut memberikan contoh cara menggunakan persistensi pemrosesan citra.

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

  <body>
    <!--Impor file 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,
        // Dapatkan pasangan AccessKey temporary (ID AccessKey dan Rahasia AccessKey) dari layanan STS.
        accessKeyId: 'yourAccessKeyId',
        accessKeySecret: 'yourAccessKeySecret',
        // Dapatkan token keamanan (SecurityToken) dari layanan STS.
        stsToken: 'yourSecurityToken',
        refreshSTSToken: async () => {
          // Dapatkan kredensial akses temporary dari layanan STS Anda.
          const info = await fetch("your_sts_server");
          return {
            accessKeyId: info.accessKeyId,
            accessKeySecret: info.accessKeySecret,
            stsToken: info.stsToken,
          };
        },
        // Interval penyegaran kredensial akses temporary. Satuan: milidetik.
        refreshSTSTokenInterval: 300000,
        // Tentukan nama bucket. Contohnya, examplebucket.
        bucket: "examplebucket",
        // Ganti yourRegion dengan wilayah tempat bucket berada. Misalnya, jika bucket berada di wilayah China (Hangzhou), atur region menjadi oss-cn-hangzhou.
        region: "oss-cn-hangzhou",
      });

      // Tentukan path lengkap objek sumber. Contohnya, exampledir/src.png. Path lengkap tidak boleh mengandung nama bucket.
      const sourceImage = "exampledir/src.png";
      // Tentukan path lengkap objek tujuan untuk citra hasil pemrosesan. Contohnya, exampledir/dest.png. Path lengkap tidak boleh mengandung nama 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);
      }

      // Ubah ukuran citra sumber menjadi lebar dan tinggi tetap 100 px dan simpan ke bucket sumber.
      processImage("image/resize,m_fixed,w_100,h_100", "examplebucket");
    </script>
  </body>
</html>

Hasilkan URL yang ditandatangani untuk file dengan parameter pemrosesan citra

Saat mengakses file privat melalui URL-nya, diperlukan signature. Anda tidak dapat menambahkan parameter pemrosesan citra secara langsung ke URL yang ditandatangani. Untuk memproses citra privat, Anda harus menyertakan parameter pemrosesan citra dalam proses pembuatan signature. Kode berikut memberikan contohnya:

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

  <body>
    <!--Impor file 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,
        // Dapatkan pasangan AccessKey temporary (ID AccessKey dan Rahasia AccessKey) dari layanan STS.
        accessKeyId: 'yourAccessKeyId',
        accessKeySecret: 'yourAccessKeySecret',
        // Dapatkan token keamanan (SecurityToken) dari layanan STS.
        stsToken: 'yourSecurityToken',
        refreshSTSToken: async () => {
          // Dapatkan kredensial akses temporary dari layanan STS Anda.
          const info = await fetch("your_sts_server");
          return {
            accessKeyId: info.accessKeyId,
            accessKeySecret: info.accessKeySecret,
            stsToken: info.stsToken,
          };
        },
        // Interval penyegaran kredensial akses temporary. Satuan: milidetik.
        refreshSTSTokenInterval: 300000,
        // Tentukan nama bucket. Contohnya, examplebucket.
        bucket: "examplebucket",
        // Ganti yourRegion dengan wilayah tempat bucket berada. Misalnya, jika bucket berada di wilayah China (Hangzhou), atur region menjadi oss-cn-hangzhou.
        region: "oss-cn-hangzhou",
      });

      // Hasilkan URL yang ditandatangani untuk file dengan parameter pemrosesan citra dan atur waktu kedaluwarsa URL tersebut menjadi 600 detik. Waktu kedaluwarsa maksimum adalah 32400 detik.
      const signUrl = client.signatureUrl("oss.png", {
        expires: 600,
        process: "image/resize,w_300",
      });
      console.log("signUrl=" + signUrl);
    </script>
  </body>
</html>