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 se muestra la pantalla de presentación.

Configuraciones problemáticas

Si envía useStickySettings=true al invocar ClippingMagic.edit() el editor usará la configuración rápida actualmente configurada para el usuario cuya clave API se usó para cargar la imagen.

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.


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"
    },
    "useStickySettings" : true,
    "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. 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" : 2345,
      "secret" : "image_secret"
    }, {
      "id" : 2346,
      "secret" : "image_secret2"
    } ],
    "useStickySettings" : true,
    "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.

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

useStickySettings

Opcional. Boleano, true significa que se usará la configuración rápida del usuario de la API, false u omitido significa que se usará la configuración predeterminada.

Lea más sobre el uso de configuraciones rápidas con la API

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)
hi-IN हिन्दी (hindi)
it-IT Italiano (italiano)
ja-JP 日本語 (japonés)
ko-KR 한국어 (coreano)
pt-BR Português (portugués)
tr-TR Türkçe (turco)
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.