Editor inteligente de marca branca

Passos para integração

Não deixe de ler o Guia de início rápido primeiro.

1. Faça upload de uma imagem usando a API de servidor.

2. Incorpore o editor inteligente de marca branca conforme descrito abaixo.

3. Reaja aos retornos de chamada recebidos pelo seu código enquanto seu operador humano recorta as imagens, por exemplo, instruindo o backend a fazer download dos novos resultados disponíveis.

Essa opção de integração dá a você controle total, mas exige uma integração mais profunda do frontend. Se quiser uma opção integração mais simples, veja o editor inteligente hospedado.

Preparação

Para usar o ClippinMagic.js, comece por inseri-lo e inicializá-lo nas páginas em que você quer permitir a edição:

<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 uma imagem individual

Você pode exibir o editor para uma imagem individual desta forma:

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

A função callback será chamada com result-generated ou editor-exit, mas não com os dois. Cada uma dessas opções indica que o editor foi fechado.

Omita or passe false para useStickySettings se quiser usar as configurações padrão de fábrica.

Essa chamada somente deve ser feita após o evento document ready, pois ela faz referência ao DOM.

Editar várias imagens em sequência

Você pode exibir o editor para a edição de várias imagens desta forma:

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

A função callback será chamada com result-generated uma vez para cada resultado produzido pelo usuário, ou seja, uma vez para cada clique em 'Concluído'. No final, haverá uma chamada editor-exit indicando que o editor foi fechado, o que pode ocorrer porque o usuário clicou em X ou porque não há mais imagens a editar. Não há callback para o caso de o usuário pular uma imagem.

Omita or passe false para useStickySettings se quiser usar as configurações padrão de fábrica.

Essa chamada somente deve ser feita após o evento document ready, pois ela faz referência ao DOM.

Callback function(opts)

A função edit recebe uma função callback como parâmetro. Esse callback permite responder a ações do usuário e notificar o servidor de back-end sobre o progresso da edição de imagem.

A assinatura do callback é function(opts) e exceções ou valores retornados são ignorados. O parâmetro opts é um PlainObject contendo:

Assim que o editor for fechado, você pode chamar edit() novamente. Chamadas anteriores a isso resultam em exceção.

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

Definições de função

ClippingMagic.initialize(opts) -> array_of_missing_features

A função initialize recebe um PlainObject contendo pares de chave/valor que configuram a inicialização:

A função retorna um array de JavaScript com cadeias de caracteres descrevendo os recursos que o navegador atual não tem, mas que são necessários para execução do editor. Se esse array estiver vazio, você pode prosseguir e chamar a função edit.

ClippingMagic.edit(opts, callback)

A função edit recebe os seguintes parâmetros:

Esse método não retorna um valor. Uma exceção será acionada se initialize não for chamado antes de chamar este método, se initialize retornar um array não vazio ou se a janela do editor já estiver aberta.