White-Label-Smart-Editor

Integrationsschritte

Lesen Sie zuerst den Abschnitt Schnellstart.

1. Laden Sie ein Bild über die Server-API hoch.

2. Betten Sie den White-Label-Smart-Editor wie nachstehend beschrieben ein.

3. Reagieren Sie auf die von Ihrem Code empfangenen Rückrufe, während Ihr menschliche Bediener die Bilder beschneidet, z. B. indem Sie Ihr Backend anweisen, die neu verfügbaren Ergebnisse herunterzuladen.

Diese Integrationsoption verschafft Ihnen die vollständige Kontrolle, erfordert jedoch eine tiefere Front-End-Integration. Wenn Sie eine einfachere Integrationsoption wünschen, beziehen Sie sich auf Gehosteter Smart-Editor.

Setup

Um ClippingMagic.js zu verwenden, sollten Sie es zunächst auf den Seiten einbeziehen und initialisieren, auf denen eine Bearbeitung möglich sein soll:

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

Einzelbild bearbeiten

So können Sie den Editor für ein Einzelbild anzeigen:

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

Die Rückruffunktion wird entweder mit result-generated oder editor-exit aufgerufen, aber nicht mit beiden. Jede Funktion zeigt an, dass der Editor geschlossen wurde.

Lassen Sie dies aus oder übergeben Sie false für useStickySettings, um werkseitige Standardeinstellungen zu verwenden.

Stellen Sie sicher, dass dieser Aufruf nach dem Dokument bereit-Ereignis erfolgt, da er auf DOM verweist.

Mehrere Bilder nacheinander bearbeiten

So wird der Editor für die Bearbeitung von mehreren Bildern angezeigt:

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

Die Rückruffunktion wird einmal für jedes vom Benutzer erzeugte Ergebnis mit result-generated abgerufen (= einmal pro Klick auf „Fertig“). Am Ende wird ein Aufruf von editor-exit ausgeführt, wodurch angezeigt wird, dass der Editor geschlossen wurde, entweder weil der Benutzer auf X geklickt hat oder weil keine Bilder mehr zur Bearbeitung vorhanden sind. Wenn der Benutzer ein Bild überspringt, gibt es keinen Rückruf.

Lassen Sie dies aus oder übergeben Sie false für useStickySettings, um werkseitige Standardeinstellungen zu verwenden.

Stellen Sie sicher, dass dieser Aufruf nach dem Dokument bereit-Ereignis erfolgt, da er auf DOM verweist.

Rückruf function(opts)

Die Funktion edit übernimmt die Funtion callback als Parameter. Mit diesem Rückruf können Sie auf Benutzeraktionen reagieren und den Backend-Server über den Fortschritt der Bildbearbeitung informieren.

Die Signatur des Rückrufs ist function(opts), und alle Ausnahmen oder zurückgegebenen Werte werden ignoriert. Der Parameter opts ist ein PlainObject mit:

Sobald der Editor geschlossen wird, können Sie edit() erneut aufrufen (Aufrufe, die davor vorgenommen wurden, führen zu einer Ausnahme).

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

Definitionen der Funktionen

ClippingMagic.initialize(opts) -> array_of_missing_features

Die Funktion initialize übernimmt ein PlainObject, das Schlüssel-/Wertepaare enthält, mit denen die Initialisierung konfiguriert wird:

Die Funktion gibt ein JavaScript-Array mit Zeichenfolgen zurück, die Leistungsmerkmale beschreiben, die im aktuellen Browser fehlen, aber zum Ausführen des Editors erforderlich sind. Wenn dieses Array leer ist, können Sie die Funktion edit gleich aufrufen.

ClippingMagic.edit(opts, callback)

Die Funktion edit übernimmt folgende Parameter:

Diese Methode gibt keinen Wert zurück. Wenn vor dem Aufruf dieser Methode initialize nicht aufgerufen wurde oder wenn initialize ein nicht leeres Array zurückgegeben hat oder wenn ein Editor-Fenster bereits geöffnet ist, wird eine Ausnahme ausgelöst.