Editor intelligente etichetta bianca

Passi per l'Integrazione

Leggi prima la guida di Avvio rapido.

1. Carica un'immagine usando l'API server.

2. Incorpora l'Editor intelligente Etichetta bianca come descritto qui di seguito.

3. Reagisci ai callback ricevuti dal tuo codice mentre il tuo operatore umano ritaglia le immagini, per esempio chiedendo al tuo backend di scaricare i nuovi risultati disponibili.

Questa opzione di integrazione consente il controllo completo ma richiede un'integrazione front-end avanzata. Se preferisci un'integrazione più semplice, consulta Editor intelligente ospitato.

Impostazione

Per usare ClippingMagic.js, prima di tutto devi includerlo e inizializzarlo sulle pagine dove vuoi consentire la modifica:

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

Modifica una singola immagine

Puoi visualizzare l'editor per una singola immagine in questo modo:

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

La funzione di callback viene chiamata con result-generated o editor-exit, ma non entrambi. Entrambi indicano che l'editor è stato chiuso.

Ometti o passa a false per useStickySettings usare le impostazioni di fabbrica.

Assicurati di eseguire questa chiamata dopo l'evento Document Ready dato che fa riferimento al DOM.

Modifica di molteplici immagini in sequenza

Puoi visualizzare l'editor per modificare molteplici immagini nel seguente modo:

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

La funzione di callback viene chiamata con result-generated una volta per ciascun risultato prodotto dall'utente (= una volta per clic su 'Completato'). Ci sarà una chiamata editor-exit alla fine per indicare che l'editor è stato chiuso, perché l'utente ha cliccato sulla X, o perché non ci sono più immagini da modificare. Non c'è callback quando l'utente salta un'immagine.

Ometti o passa a false per useStickySettings usare le impostazioni di fabbrica.

Assicurati di eseguire questa chiamata dopo l'evento Document Ready dato che fa riferimento al DOM.

Callback function(opts)

La funzione edit prende una funzione callback come parametro. Questo callback consente di rispondere alle azioni degli utenti e notificare il server backend sul progresso della modifica delle immagini.

La firma del callback è function(opts) ed eventuali eccezioni o valori restituiti sono ignorati. Il parametro opts è un PlainObject che contiene:

Non appena si chiude l'editor puoi chiamare edit() di nuovo (le chiamate fatte prima causano un'eccezione).

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

Definizioni delle funzioni

ClippingMagic.initialize(opts) -> array_of_missing_features

La funzione initialize prende un PlainObject contenente coppie chiave/valore che configurano l'inizializzazione:

La funzione restituisce un array JavaScript con stringhe che descrivono le funzioni mancanti nel browser corrente, ma richieste per eseguire l'editor. Se questo array è vuoto, puoi chiamare la funzione edit.

ClippingMagic.edit(opts, callback)

La funzione edit prende i seguenti parametri:

Questo metodo non restituisce un valore. Se initialize non è stato chiamato prima di chiamare questo metodo, oppure se initialize ha restituito un array non vuoto, o se una finestra di editor è già aperta, viene generata un'eccezione.