Éditeur intelligent de marque blanche

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.

Étapes à suivre pour l'intégration

Avant tout, veillez à lire la section Démarrage rapide.

  1. Téléchargez une image en utilisant l'API du serveur.

  2. Intégrez l'Éditeur intelligent de marque blanche comme indiqué ci-dessous.

  3. 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é.

Configuration

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>

Editer une seule image

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


Modifier plusieurs images en séquence

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


Rappel 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é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" : 2346,
    "secret" : "image_secret1"
  }
}); 

Définitions des fonctions

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. Un Objet JSON d'image (seuls l'identifiant et la clé secrète sont requis).

images

Facultatif. Un tableau des Objets JSON d'image (seuls l'identifiant et la clé secrète sont requis).

useStickySettings

Facultatif, défaut false. Vraitrue booléen signifie que les paramètres rappelés de l'utilisateur de l'API seront utilisés, false ou omis signifie que les réglages d'usine par défaut seront utilisés.

Cela vous permet de configurer les réglages de découpage de base une seule fois, puis de les appliquer à toutes les images que vous modifiez.

Read about how to configure the sticky settings

Le précadrage n'est pas disponible via l'API, mais vous pouvez configurer la limite de taille d'image dans l'appel de téléchargement de l'API.

hideBottomToolbar

Facultatif, défaut false. true booléen signifie que la barre d'outils inférieure de l'éditeur sera masquée, rendant ainsi ces paramètres indisponibles dans l'éditeur.

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)
hi-IN हिन्दी (hindi)
id-ID Indonesia (indonésien)
it-IT Italiano (italien)
ja-JP 日本語 (japonais)
ko-KR 한국어 (coréen)
pl-PL Polski (polonais)
pt-BR Português (portugais)
ru-RU Русский (russe)
th-TH ไทย (thaï)
tr-TR Türkçe (turc)
vi-VN Tiếng Việt (vietnamien)
zh-Hans-CN 简体中文 (chinois)
zh-Hant-TW 繁體中文 (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.