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.
Lea primero la sección Inicio rápido.
Cargue una imagen usando la API del servidor.
Inserte el Editor inteligente de marca blanca como se describe a continuación.
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.
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>
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.
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.
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-generated | Sí | No | 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-exit | No | No | 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ó. |
error | No | Sí |
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" } });
ClippingMagic.initialize(opts) -> array_of_missing_features
La función initialize
toma 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:
|
||||||||||||||||||||||||||||||||||||||||||||||
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.