ClippingMagic.js vous permet de facilement intégrer l'éditeur Clipping Magic dans votre site Web. Vous pouvez modifier des images uniques comme sur la première page, ou une séquence d'images comme dans le découpage en masse.
Avant tout, veillez à lire la section Démarrage rapide.
Téléchargez une image en utilisant l'API du serveur.
Intégrez l'Éditeur intelligent de marque blanche comme indiqué ci-dessous.
Réagissez aux rappels reçus par votre code lorsque votre opérateur humain détoure les images, par ex. en demandant à votre serveur dorsal de télécharger les nouveaux résultats disponibles.
Cette option d'intégration vous donne un contrôle complet, mais nécessite une intégration frontale plus approfondie. Si vous préférez une option d'intégration plus simple, veuillez consultez l'Éditeur intelligent hébergé.
Pour utiliser ClippingMagic.js, commencez par l'inclure et l'initialiser sur les pages où vous voulez autoriser l'édition :
<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>
Vous pouvez afficher l'éditeur pour une seule image de la manière suivante :
ClippingMagic.edit({ "image" : { "id" : 2346, "secret" : "image_secret1" }, "useStickySettings" : true, "hideBottomToolbar" : false, "locale" : "fr-FR" }, myCallback);
La fonction de rappel sera exécutée avec result-generated
ou editor-exit
, mais pas les deux. Chacun indique que l'éditeur a été fermé.
Omettez ou soumettez false
pour useStickySettings
pour utiliser les réglages par défaut d'usine.
Assurez-vous d'exécuter cette fonction après l'événement document prêt car elle a trait au DOM (Document Object Model).
Vous pouvez afficher l'éditeur pour éditer plusieurs images de la manière suivante :
ClippingMagic.edit({ "images" : [ { "id" : 2346, "secret" : "image_secret1" }, { "id" : 2347, "secret" : "image_secret2" } ], "useStickySettings" : true, "hideBottomToolbar" : false, "locale" : "fr-FR" }, myCallback);
La fonction de rappel sera exécutée avec result-generated
une fois pour chaque résultat produit par l'utilisateur (= une fois par clic sur « Terminé »). Il y aura un appel editor-exit
à la fin pour indiquer que l'éditeur a été fermé, soit par l'utilisateur qui clique le X, soit lorsqu'il n'y a plus d'images à éditer. Aucun n'appel n'a lieu lorsque l'utilisateur saute une image.
Omettez ou soumettez false
pour useStickySettings
pour utiliser les réglages par défaut d'usine.
Assurez-vous d'exécuter cette fonction après l'événement document prêt car elle a trait au DOM (Document Object Model).
function(opts)
La fonction edit
prend une fonction callback
pour paramètre. Ce rappel vous permet de répondre aux actions de l'utilisateur et de signaler à votre serveur dorsal le progrès réalisé.
La signature d'un rappel est function(opts)
et toutes les exceptions ou valeurs retournées sont ignorées. Le paramètre opts
est un PlainObject qui contient :
event |
Une chaîne indiquant ce qui vient de se passer. Consultez le tableau ci-dessous. |
image | Facultatif. Un Objet JSON d'image (seuls l'identifiant et la clé secrète sont inclus). |
error | Facultatif. Un Objet JSON d'erreur. |
Événement | A une image ? | A une erreur ? | Signification |
---|---|---|---|
result-generated | Oui | Non | L'utilisateur a cliqué sur « Terminé », un résultat a été généré et est disponible pour un téléchargement immédiat utilisant l'API du serveur dorsal. En mode image unique, l'éditeur a été fermé. |
editor-exit | Non | Non | L'utilisateur a fermé l'éditeur en cliquant sur le X rouge en haut à droite, ou il n'a plus d'images à éditer en mode multi-images. L'éditeur a été fermé. |
error | Non | Oui |
Une erreur s'est produite. Inspectez la valeur error pour plus d'informations. L'éditeur a été fermé.
|
Dès que l'éditeur est fermé, vous pouvez exécuter edit()
de nouveau (les appels réalisés antérieurement causent une exception).
Exemple d'invocation de rappel
callback({ "event" : "result-generated", "image" : { "id" : 2346, "secret" : "image_secret1" } });
ClippingMagic.initialize(opts) -> array_of_missing_features
La fonction initialize
prend un PlainObject contenant des paires clé/valeur qui configurent l'initialisation :
apiId
Requis |
Votre identifiant API. |
La fonction renvoie un tableau JavaScript avec des chaînes décrivant les fonctionnalités manquantes dans le navigateur utilisé qui sont requises pour exécuter l'éditeur. Si ce tableau est vide, vous pouvez continuer et exécuter la fonction edit
.
ClippingMagic.edit(opts, callback)
La fonction edit
utilise les paramètres suivants :
opts |
Requis. Un PlainObject contenant des paires clé/valeur qui configurent l'initialisation :
|
||||||||||||||||||||||||||||||||||||||||||||||
callback |
Requis. Consultez la section Rappel ci-dessus pour les détails. |
Cette méthode ne renvoie pas une valeur. Si initialize
n'a pas été appelé avant d'appeler cette méthode, ou si initialize
a renvoyé un tableau comportant des entrées, ou si une fenêtre d'éditeur est déjà ouverte, une exception sera déclenchée.