ClippingMagic.js

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.

Prova

Dopo aver caricato alcune immagini puoi elaborare gli esempi qui sotto nel tuo browser, clicca semplicemente sul pulsante "Prova!".

Vi sono alcune piccole differenze fra l'editor regolare Clipping Magic e l'editor API:

  • La personalizzazione delle impostazioni predefinite non è disponibile.
  • Lo splash screen di guida non è visualizzato.

Impostazione

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

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js" type="text/javascript"></script>
<script src="https://clippingmagic.com/api/v1/ClippingMagic.js" type="text/javascript"></script>
<script type="text/javascript">
  var errorsArray = ClippingMagic.initialize({apiId: 123});
  if (errorsArray.length > 0) alert("Spiacente, il tuo browser non dispone di alcune funzioni richieste: \n\n " + errorsArray.join("\n "));
</script>

ClippingMagic.js dipende da jQuery, per questo motivo devi caricare jQuery prima di caricare ClippingMagic.js.


Modifica una singola immagine

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

ClippingMagic.edit({
    "image" : {
      "id" : 2345,
      "secret" : "image_secret"
    },
    "locale" : "it-IT"
  }, callback);

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

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"
    } ],
    "locale" : "it-IT"
  }, callback);

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.

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).
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)
it-IT Italiano (italiano)
ja-JP 日本語 (giapponese)
ko-KR 한국어 (coreano)
pt-BR Português (portoghese)
zh-Hans-CN 简体中文 (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.