Editor inteligente de marca blanca

ClippingMagic.js le permite integrar fácilmente el editor de Clipping Magic en su propio sitio web. Puede editar una sola imagen, como en la página inicial, o una secuencia de imágenes, como en el caso de los recortes en volumen.

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:

event

Cadena que indica lo que acaba de suceder, consulte la tabla a continuación.

image Opcional. Un objeto JSON de la imagen (solamente se incluye la id y el código secreto).
error Opcional. Un objeto de error JSON.
Evento¿Tiene imagen?¿Tiene error?Significado
result-generatedNo El usuario hizo clic en 'Listo', se produjo un resultado y está disponible para descargarlo de inmediato usando la API backend. En el modo de una sola imagen, el editor se ha cerrado.
editor-exitNoNo El usuario cerró el editor al hacer clic en la X roja en el extremo superior derecho o el usuario ya no tiene imágenes que editar en el modo de múltiples imágenes. El editor se cerró.
errorNo Ocurrió un error. Inspecciones el valor del error para obtener más información. El editor se cerró.

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

Ejemplo de invocación de callback

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:

apiId
Obligatorio
Su ID de API.

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:

opts

Obligatorio. Un PlainObject que contiene pares de claves/valores que configuran la inicialización:

image

Opcional. Un objeto de imagen JSON (solamente se requiere la id y el código secreto).

images

Opcional. Una matriz de objetos de imagen JSON (solamente se requiere la id y el código secreto).

useStickySettings

Opcional, predeterminado false. Boleano, truesignifica que se usará la configuración actual de la API, false u omitido significa que se usará la configuración predeterminada de fábrica.

Esto le permite configurar una sola vez la configuración de base para recortar y luego se aplica a todas las imágenes que edite.

Read about how to configure the sticky settings

Precortar no está disponible a través de la API, pero puede configurar el límite del tamaño de imagen en la invocación de carga de la API.

hideBottomToolbar

Opcional, predeterminado false. Booleano, true significa que la barra de herramientas del editor estará ocultada, por lo cual esas configuraciones no estarán disponibles en el editor.

locale

Opcional. El idioma de presentación para usar para el editor. El idioma predeterminado es inglés si se omite. Los valores válidos son:

CódigoIdioma para mostrar
en-US English (inglés)
de-DE Deutsch (alemán)
es-ES Español (español)
fr-FR Français (francés)
hi-IN हिन्दी (hindi)
id-ID Indonesia (indonesio)
it-IT Italiano (italiano)
ja-JP 日本語 (japonés)
ko-KR 한국어 (coreano)
pl-PL Polski (polaco)
pt-BR Português (portugués)
ru-RU Русский (ruso)
th-TH ไทย (tailandés)
tr-TR Türkçe (turco)
vi-VN Tiếng Việt (vietnamita)
zh-Hans-CN 简体中文 (chino)
zh-Hant-TW 繁體中文 (chino)
callback

Obligatorio. Consulte la sección Callback, arriba para ver los detalles.

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.