Editor intelligente etichetta bianca

ClippingMagic.js ti consente di integrare convenientemente l'editor Clipping Magic nel tuo sito web. Puoi modificare immagini singole come nella pagina riepilogativa, oppure una sequenza di immagini come nel blocco di ritagli.

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" : 2345,
      "secret" : "image_secret"
    },
    "useStickySettings" : true,
    "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" : 2345,
      "secret" : "image_secret"
    }, {
      "id" : 2346,
      "secret" : "image_secret2"
    } ],
    "useStickySettings" : true,
    "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:

event

Stringa che indica che cosa è appena successo, cfr. la tabella qui di seguito.

image Facoltativo. Un Oggetto JSON Immagine (solo l'ID e la chiave privata sono inclusi).
error Facoltativo. Un Errore Oggetto JSON.
EventoHa un'immagine?Ha un errore?Significato
result-generatedNo L'utente ha cliccato su 'Completato', è stato generato un risultato disponibile per lo scaricamento immediato usando l'API di backend. Nella modalità immagine singola, l'editor è stato chiuso.
editor-exitNoNo L'utente ha chiuso l'editor cliccando sulla X rossa nell'angolo in alto a destra, oppure l'utente non ha più immagini da modificare nella modalità molteplici immagini. L'editor è stato chiuso.
errorNo Si è verificato un errore. Controlla il valore error per maggiori informazioni. L'editor è stato chiuso.

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

Esempio di chiamata callback

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

Definizioni delle funzioni

ClippingMagic.initialize(opts) -> array_of_missing_features

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

apiId
Obbligatorio
Il tuo ID API.

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:

opts

Obbligatorio. Un PlainObject contenente coppie chiave/valore che configurano l'inizializzazione:

image

Facoltativo. Un Oggetto JSON Immagine (solo l'ID e la chiave privata sono obbligatori).

images

Facoltativo. Un array di Oggetti JSON Immagine (solo l'ID e la chiave privata sono obbligatori).

useStickySettings

Facoltativo. Booleano, truesignifica che saranno usate le impostazioni delle scorciatoie dell'utente false o omesso significa che saranno usate le impostazioni di fabbrica.

Ciò ti consente di configurare le impostazioni dei ritagli una volta, e quindi applicarli a tutte le immagini che modifichi.

Read about how to configure the sticky settings

Pre-ritaglio non è disponibile tramite API, ma puoi configurare il limite delle dimensioni dell'immagine nella chiamata di caricamento API.

locale

Facoltativo. La lingua di visualizzazione da usare per l'editor. Se omessa, la lingua è automaticamente l'Inglese. I valori validi sono:

CodiceLingua di visualizzazione
en-US English (inglese)
de-DE Deutsch (tedesco)
es-ES Español (spagnolo)
fr-FR Français (francese)
hi-IN हिन्दी (hindi)
id-ID Indonesia (indonesiano)
it-IT Italiano (italiano)
ja-JP 日本語 (giapponese)
ko-KR 한국어 (coreano)
pl-PL Polski (polacco)
pt-BR Português (portoghese)
ru-RU Русский (russo)
th-TH ไทย (thai)
tr-TR Türkçe (turco)
vi-VN Tiếng Việt (vietnamita)
zh-Hans-CN 简体中文 (cinese)
zh-Hant-TW 繁體中文 (cinese)
callback

Obbligatorio. Per maggiori dettagli vedere la sezione Callback qui sopra.

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.