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.

Faites un essai

Après avoir téléchargé une ou deux images,vous pouvez exécuter les exemples ci-dessous directement dans votre navigateur. Il suffit de cliquer sur le bouton "Faites un essai !".

Quelques différences mineures existent entre l'éditeur Clipping Magic normal et l'éditeur API :

  • La personnalisation des réglages par défaut n'est pas disponible.
  • La page de garde d'aide n'est pas affichée.

Pour utiliser ClippingMagic.js, commencez par l'inclure et l'initialiser sur les pages où vous voulez autoriser l'édition :

<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("Nous sommes désolés, mais votre navigateur ne comporte pas certaines fonctionnalités requises: \n\n " + errorsArray.join("\n "));
</script>

ClippingMagic.js dépend de jQuery. Assurez-vous donc de charger jQuery avant de charger ClippingMagic.js.

Vous pouvez afficher l'éditeur pour une seule image de la manière suivante :

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

La fonction de rappel sera exécutée avec result-generated ou editor-exit, mais pas les deux. Les deux indiquent que l'éditeur a été fermé.

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" : 2345,
      "secret" : "image_secret"
    }, {
      "id" : 2346,
      "secret" : "image_secret2"
    } ],
    "locale" : "fr-FR"
  }, callback);

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.

Assurez-vous d'exécuter cette fonction après l'événement document prêt car elle a trait au DOM (Document Object Model).

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. Une Image d'objet JSON (seuls l'identifiant et la clé secrète sont inclus).
error
Facultatif. Une Erreur d'objet JSON.
ÉvénementA une image ?A une erreur ?Signification
result-generatedOuiNon 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-exitNonNon 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é.
errorNonOui 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" : 2345,
    "secret" : "image_secret"
  }
}); 

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 :

image
Facultatif. Une Image d'objet JSON (seuls l'identifiant et la clé secrète sont requis).
images
Facultatif. Un tableau d'Images d'objets JSON (seuls l'identifiant et la clé secrète sont requis).
locale
Facultatif. La langue d'affichage à utiliser pour l'éditeur. La langue par défaut est l'anglais, si aucune langue n'est indiquée. Les valeurs valides sont :
CodeLangue d'affichage
en-US English (anglais)
de-DE Deutsch (allemand)
es-ES Español (espagnol)
fr-FR Français (français)
it-IT Italiano (italien)
ja-JP 日本語 (japonais)
ko-KR 한국어 (coréen)
pt-BR Português (portugais)
zh-Hans-CN 简体中文 (chinois)
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.


Erreur Javascript :-(


Merci de nous aider à régler ce problème !