Editor Cerdas Label Putih

Langkah-langkah Integrasi

Pastikan untuk membaca Mulai Cepat terlebih dahulu.

1. Unggah gambar menggunakan API Server.

2. Sematkan Editor Cerdas Label Putih sebagaimana dijelaskan dibawah ini.

3. Bereaksi terhadap panggilan balik yang diterima oleh kode Anda saat Operator Manusia Anda klip gambar, mis. dengan menginstruksikan backend Anda untuk mengunduh hasil baru yang tersedia.

Opsi integrasi ini memberi Anda kendali penuh, tetapi membutuhkan integrasi front-end yang lebih dalam. Jika Anda menginginkan opsi integrasi yang lebih sederhana, silakan lihat Cerdas yang Dihosting.

Aturan

Untuk menggunakan ClippingMagic.js, mulailah dengan memasukkan dan menginisialisasinya pada halaman di mana Anda ingin mengizinkan pengeditan:

<script src="https://clippingmagic.com/api/v1/ClippingMagic.js" type="text/javascript"></script>
<script type="text/javascript">
  function myCallback(opts) {
    // TODO: Replace this with your own functionality
    switch (opts.event) {
      case "error":
          alert("An error occurred: " + opts.error.status + ", " + opts.error.code + ", " + opts.error.message);
          break;

      case "result-generated":
          alert("Generated a result for " + opts.image.id + ", " + opts.image.secret);
          break;

      case "editor-exit":
          alert("The editor dialog closed");
          break;
    }
  }
  var errorsArray = ClippingMagic.initialize({apiId: 123});
  if (errorsArray.length > 0) alert("Sorry, your browser is missing some required features: \n\n " + errorsArray.join("\n "));
</script>

Edit Gambar Tunggal

Anda dapat menampilkan editor untuk satu gambar seperti ini:

ClippingMagic.edit({
    "image" : {
      "id" : 2346,
      "secret" : "image_secret1"
    },
    "useStickySettings" : true,
    "hideBottomToolbar" : false,
    "locale" : "id-ID"
  }, myCallback);

Fungsi panggilan balik akan dipanggil dengan baik result-generated atau editor-exit, tetapi tidak kedua-duanya. Masing-masing menunjukkan bahwa editor telah ditutup.

Hilangkan atau teruskan false untuk useStickySettings untuk menggunakan setelan default pabrik.

Pastikan untuk melakukan panggilan ini setelah peristiwa siap dokumen karena merujuk ke DOM.

Edit Beberapa Gambar Secara Berurutan

Anda dapat menampilkan editor untuk mengedit banyak gambar seperti:

ClippingMagic.edit({
    "images" : [ {
      "id" : 2346,
      "secret" : "image_secret1"
    }, {
      "id" : 2347,
      "secret" : "image_secret2"
    } ],
    "useStickySettings" : true,
    "hideBottomToolbar" : false,
    "locale" : "id-ID"
  }, myCallback);

Fungsi panggilan balik akan dipanggil dengan result-generated satu kali untuk setiap hasil yang dibuat oleh pengguna (= sekali per klik on 'Done'). Akan ada satu panggilan editor-exit di bagian akhir yang menunjukkan bahwa editor telah ditutup, baik oleh pengguna mengeklik X, atau dengan kehabisan gambar untuk diedit. Tidak ada panggilan balik saat pengguna melewatkan gambar.

Hilangkan atau teruskan false untuk useStickySettings untuk menggunakan setelan default pabrik.

Pastikan untuk melakukan panggilan ini setelah peristiwa siap dokumen karena merujuk ke DOM.

Telepon Balik function(opts)

Fungsi edit menggunakan fungsi callback sebagai parameter. Panggilan balik ini memungkinkan Anda merespons tindakan pengguna dan memberi tahu server backend Anda tentang kemajuan pengeditan gambar.

Tanda tangan panggilan balik adalah function(opts) dan pengecualian atau nilai apa pun yang dikembalikan akan diabaikan. Parameter opts adalah PlainObject yang berisi:

Segera setelah editor ditutup, Anda dapat memanggil edit() lagi (panggilan yang dibuat sebelumnya mengarah ke pengecualian).

callback({
  "event" : "result-generated",
  "image" : {
    "id" : 2346,
    "secret" : "image_secret1"
  }
}); 

Definisi Fungsi

ClippingMagic.initialize(opts) -> array_of_missing_features

Fungsi initialize mengambil PlainObject yang berisi pasangan kunci/nilai yang mengonfigurasi inisialisasi:

Fungsi mengembalikan Array JavaScript dengan string yang mendeskripsikan fitur yang hilang di browser saat ini, tetapi diperlukan untuk menjalankan editor. Jika larik ini kosong, Anda bisa melanjutkan dan memanggil fungsi edit.

ClippingMagic.edit(opts, callback)

Fungsi edit mengambil parameter berikut:

Metode ini tidak mengembalikan nilai. Jika initialize belum dipanggil sebelum memanggil metode ini, atau jika initialize mengembalikan larik yang tidak kosong, atau jika jendela editor sudah terbuka, kemudian pengecualian dibuat.