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

Probieren Sie es

Nachdem Sie einige Bilder hochgeladen haben, können Sie die nachstehenden Beispiele direkt in Ihrem Browser ausführen. Klicken Sie einfach auf die "Probieren"-Schaltfläche.

Zwischen dem normalen Clipping Magic-Editor und dem API-Editor gibt es einige geringfügige Unterschiede.

  • Die benutzerdefinierten Einstellungen stehen nicht zur Verfügung.
  • Der Hilfe-Startbildschirm wird nicht angezeigt.

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="//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("Ihr Browser unterstützt leider einige der erforderlichen Funktionen nicht: \n\n " + errorsArray.join("\n "));
</script>

ClippingMagic.js hängt von jQuery ab. Laden Sie also auf jeden Fall jQuery, bevor ClippingMagic.js geladen wird.

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

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

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

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

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

ClippingMagic.edit({
    "images" : [ {
      "id" : 2345,
      "secret" : "image_secret"
    }, {
      "id" : 2346,
      "secret" : "image_secret2"
    } ],
    "locale" : "de-DE"
  }, callback);

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.

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

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
Zeichenkette, 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" : 2345,
    "secret" : "image_secret"
  }
}); 

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


Javascript-Fehler :-(


Helfen Sie uns bitte, dieses Problem zu beheben!