Éditeur intelligent de marque blanche

É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 :

Dès que l'éditeur est fermé, vous pouvez exécuter edit() de nouveau (les appels réalisés antérieurement causent une exception).

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 :

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 :

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.