ClippingMagic.js

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.

Pruébelo

Después de cargar un par de imágenes podrá ejecutar en su propio explorador los ejemplos que aparecen abajo; simplemente haga clic en el botón "Probar".

Hay algunas diferencias entre el editor normal de Clipping Magic y el editor API:

  • No está disponible la personalización de la configuración predeterminada.
  • No se muestra la pantalla de presentación.

Configuración

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

<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("Lo sentimos, su explorador no tiene algunas funciones necesarias: \n\n " + errorsArray.join("\n "));
</script>

ClippingMagic.js depende de jQuery, así es debe cargar jQuery antes de cargar ClippingMagic.js.


Editar una sola imagen

Puede mostrar el editor de una sola imagen así:

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

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

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

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.

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 de imagen JSON (solamente se incluye la id y la clave secreta).
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" : 2345,
    "secret" : "image_secret"
  }
}); 

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

Requerido. 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 clave secreta).
images Opcional. Una matriz de objetos de imagen JSON (solamente se requiere la id y la clave secreta).
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 de presentación
en-US English (inglés)
de-DE Deutsch (alemán)
es-ES Español (español)
fr-FR Français (francés)
it-IT Italiano (italiano)
ja-JP 日本語 (japonés)
ko-KR 한국어 (coreano)
pt-BR Português (portugués)
zh-Hans-CN 简体中文 (chino)
callback

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

Error de Javascript :-(


¡Ayúdenos a corregir este problema!