White-Label-Smart-Editor

Mit ClippingMagic.js können Sie den Clipping Magic-Editor problemlos in Ihre eigene Website integrieren. Sie können Einzelbilder wie auf der Homepage der Website oder eine Reihe von Bildern wie beim Massen-Clipping bearbeiten.

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:

event

Zeichenfolge, die angibt, was gerade passiert ist (siehe Tabelle weiter unten).

image Optional. Ein Bild-JSON-Objekt (nur ID und geheimer Schlüssel sind enthalten).
error Optional. Ein Fehler-JSON-Objekt.
EreignisBild vorhanden?Fehler vorhanden?Bedeutung
result-generatedJaNein Der Benutzer hat auf „Fertig“ geklickt, und es wurde ein Ergebnis generiert, das zum unmittelbaren Download mit der Backend-API zur Verfügung steht. Im Einzelbildmodus wurde der Editor geschlossen.
editor-exitNeinNein Der Benutzer hat den Editor durch Klicken auf das rote X in der oberen, rechten Ecke geschlossen, oder der Benutzer hat im Mehrfachbildmodus keine zu bearbeitenden Bilder mehr. Der Editor wurde geschlossen.
errorNeinJa Es ist ein Fehler aufgetreten. Prüfen Sie den Wert für error zwecks weiterer Informationen. Der Editor wurde geschlossen.

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

Beispiel für den Aufruf eines Rückrufs

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:

apiId
Erforderlich
Ihre API-ID.

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:

opts

Erforderlich. Ein PlainObject, das Schlüssel-/Wertepaare enthält, die die Initialisierung konfigurieren:

image

Optional. Ein Bild-JSON-Objekt (nur ID und geheimer Schlüssel sind erforderlich).

images

Optional. Ein Array aus Bild-JSON-Objekten (nur ID und geheimer Schlüssel sind erforderlich).

useStickySettings

Optional, Standardeinstellung false. Boolesch true bedeutet, dass die persistenten Einstellungen des API-Benutzers verwendet werden, false oder ein Auslassen bedeutet, dass werkseitige Standardeinstellungen verwendet werden.

Damit können Sie die grundlegenden Clipping-Einstellungen einmal konfigurieren, worauf sie anschließend für alle von Ihnen bearbeiteten Bilder übernommen werden.

Read about how to configure the sticky settings

„Vorab zuschneiden“ ist über die API nicht verfügbar, aber Sie können das Bildgrößenlimit im API-Upload-Abruf konfigurieren.

hideBottomToolbar

Optional, Standardeinstellung false. Boolesch true bedeutet, dass die untere Symbolleiste des Editors ausgeblendet wird. Somit stehen diese Einstellungen im Editor nicht zur Verfügung.

locale

Optional. Die für den Editor zu verwendende Anzeigesprache. Wird standardmäßig auf Englisch gesetzt, wenn keine Auswahl getroffen wird. Gültige Werte sind:

CodeAnzeigesprache
en-US English (Englisch)
de-DE Deutsch
es-ES Español (Spanisch)
fr-FR Français (Französisch)
hi-IN हिन्दी (Hindi)
id-ID Indonesia (Indonesisch)
it-IT Italiano (Italienisch)
ja-JP 日本語 (Japanisch)
ko-KR 한국어 (Koreanisch)
pl-PL Polski (Polnisch)
pt-BR Português (Portugiesisch)
ru-RU Русский (Russisch)
th-TH ไทย (Thailändisch)
tr-TR Türkçe (Türkisch)
vi-VN Tiếng Việt (Vietnamesisch)
zh-Hans-CN 简体中文 (Chinesisch)
zh-Hant-TW 繁體中文 (Chinesisch)
callback

Erforderlich. Weitere Einzelheiten finden Sie im Abschnitt „Rückruf“ weiter oben.

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.