Editor inteligente de marca blanca

Pasos para la integración

Lea primero la sección Inicio rápido.

1. Cargue una imagen usando la API del servidor.

2. Inserte el Editor inteligente de marca blanca como se describe a continuación.

3. Reaccione a la devolución de llamada que su código recibe cuando el operador humano recorta las imágenes, p. ej. indicándole al backend que descargue los resultados nuevos.

Esta opción de integración le da control completo, pero requiere una integración más a fondo con el front-end. Si prefiere una opción de integración más sencilla, consulte la información del Editor inteligente hospedado.

Configuración

Para usar ClippingMagic.js, primero inclúyalo e inícielo en las páginas en las que desea permitir ediciones:

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

Editar una sola imagen

Puede mostrar el editor de una sola imagen así:

ClippingMagic.edit({
    "image" : {
      "id" : 2346,
      "secret" : "image_secret1"
    },
    "useStickySettings" : true,
    "hideBottomToolbar" : false,
    "locale" : "es-ES"
  }, myCallback);

La función callback será invocada ya sea con el código result-generated o editor-exit, pero no con los dos. Cada una indica que se cerró el editor.

Omitir o enviar false para que useStickySettings use la configuración predeterminada.

Asegúrese de invocar esto después del evento de documento listo ya que usa el DOM como referencia.

Editar múltiples imágenes en secuencia

Puede mostrar el editor para editar múltiples imágenes así:

ClippingMagic.edit({
    "images" : [ {
      "id" : 2346,
      "secret" : "image_secret1"
    }, {
      "id" : 2347,
      "secret" : "image_secret2"
    } ],
    "useStickySettings" : true,
    "hideBottomToolbar" : false,
    "locale" : "es-ES"
  }, myCallback);

La función callback será invocada con result-generated una vez por cada resultado producido por el usuario (= una vez cada vez que haga clic en 'Listo'). Habrá una invocación de editor-exit al final para indicar que se cerró el editor, ya sea porque el usuario hizo clic en la X o porque ya no hay más imágenes que editar. No se ejecuta callback cuando el usuario se salta una imagen.

Omitir o enviar false para que useStickySettings use la configuración predeterminada.

Asegúrese de invocar esto después del evento de documento listo ya que usa el DOM como referencia.

Callback function(opts)

La función edit toma la función callback como parámetro. Este callback le permite responder a las acciones del usuario y notificar a su servidor backend sobre el progreso de la edición de la imagen.

La firma del callback es function(opts) y se ignoran los las excepciones o los valores devueltos. El parámetro opts es un PlainObject que contiene:

En cuanto el editor se cierre puede volver a invocar edit() (si se invoca antes, se producirá una excepción).

callback({
  "event" : "result-generated",
  "image" : {
    "id" : 2346,
    "secret" : "image_secret1"
  }
}); 

Definición de las funciones

ClippingMagic.initialize(opts) -> array_of_missing_features

La función initializetoma un PlainObject que contiene pares de claves/valores que configuran la inicialización:

La función devuelve una matriz de JavaScript con cadenas que describen las funciones faltantes en el explorador actual, pero necesarias para ejecutar el editor. Si esta secuencia está vacía, puede invocar la función edit.

ClippingMagic.edit(opts, callback)

La función edit toma los siguientes parámetros:

Este método no devuelve un valor. Si initialize no se ha invocado antes de invocar este método, o si initialize devolvió una matriz no vacía, o si ya está abierta una ventana del editor, se produce una excepción.