Akıllı Beyaz Etiket Düzenleyicisi

Entegrasyon Aşamaları

Öncelikle Hızlı Başlangıç bölümünü okuyun.

1. Sunucu API'si kullanarak bir resim yükleyin.

2. Akıllı Beyaz Etiket Düzenleyicisini aşağıda belirtildiği şekilde ekleyin.

3. İnsan olan Operatörünüz resimleri kırparken kodunuz tarafından alınan geri çağırmaya karşılık verin. Mesela arka ucunuza daha yeni hazır hale gelen sonuçları indirme talimatı vererek.

Bu entegrasyon seçeneği size tam kontrol sağlamakla birlikte daha derin bir ön uç entegrasyonu gerektirmektedir. Daha basit bir entegrasyon seçeneği isterseniz, lütfen Barındırılmış Akıllı Düzenleyici seçeneğine göz atın.

Kurulum

ClippingMagic.js kullanmak için, dosyayı düzenleme yapmasına izin vermek istediğiniz sayfalara dahil etmekle ve bu sayfalarda başlatmakla başlayabilirsiniz:

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

Tek Bir Resim Düzenle

Düzenleyiciyi tek bir resim için şu şekilde görüntüleyebilirsiniz:

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

Geri çağırma işlevi ya result-generated ya da editor-exit ile çağrılabilir, ancak ikisiyle birlikte çağrılamaz. Her biri düzenleyicinin kapandığını göstermektedir.

Fabrika çıkış ayarlarını kullanmak için geçin veya useStickySettings için false kodunu girin.

DOM'u kaynak gösterdiğinden bu işlemi belge hazır etkinliğinin ardından yapın.

Sırayla Çok Sayıda Resim Düzenle

Düzenleyiciyi çok sayıda resim için şu şekilde görüntüleyebilirsiniz:

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

Kullanıcı her bir sonucu oluşturduğunda (='Bitti' üzerine bir kez tıkladığında) result-generated ile geri çağırma işlevi çağrılacaktır. Sonda düzenleyicinin kapandığını belirten, ya X'e tıklayarak ya da düzenlenecek resim kalmaması ile gerçekleşen bir editor-exit çağrısı olacaktır. Kullanıcının bir resmi atladığı durumda geri çağırma yapılamamaktadır.

Fabrika çıkış ayarlarını kullanmak için geçin veya useStickySettings için false kodunu girin.

DOM'u kaynak gösterdiğinden bu işlemi belge hazır etkinliğinin ardından yapın.

Geri Arama function(opts)

Bu edit işlevi bir callback işlevini parametre olarak almaktadır. Bu geri çağırma size kullanıcı eylemlerine yanıt verme ve resim düzenlemenin ilerleyişi hakkında arka uç sunucusuna bildirimde bulunma imkanı vermektedir.

Geri çağırma işareti şöyledir: function(opts) ve geri dönen herhangi bir özel durum veya değer göz ardı edilmektedir. opts parametresi bir PlainObject içermektedir:

Düzenleyici kapatılır kapatılmaz edit() tekrar çağırabilirsiniz (bundan önce yapılan çağrılar özel bir duruma neden olur).

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

İşlev Tanımlamaları

ClippingMagic.initialize(opts) -> array_of_missing_features

initialize işlevi başlatma ayarlarını yapan anahtar/değer çiftlerini içeren bir PlainObject alır:

İşlev size mevcut tarayıcıda eksik olan özellikleri belirten dizeleri olan bir JavaScript dizisi geri döndürür. Eğer bu dizi boşsa siz edit işlevini çağırabilirsiniz.

ClippingMagic.edit(opts, callback)

Bu edit işlevi şu parametreleri almaktadır:

Bu yöntem bir değer döndürmemektedir. Eğer bu yöntemi çağırmadan önce initialize çağrılmadıysa veya eğer initialize boş olmayan bir dizi döndürdü ise veya bir düzenleyici penceresi zaten açıksa o zaman özel durum oluşturulur.