Inteligentny edytor typu white label

Etapy integracji

Pamiętaj, żeby najpierw przeczytać Szybki start.

1. Przekaż obraz za pomocą serwera API.

2. Osadź Inteligentny edytor typu white label zgodnie z opisem poniżej.

3. Reaguj na wywołania zwrotne otrzymane przez twój kod w miarę wycinania obrazów przez użytkownika, na przykład instruując zaplecze aby pobrało nowo dostępne rezultaty.

Ta opcja integracji zapewnia pełną kontrolę, ale wymaga głębszej integracji na poziomie frontonu. Opcję prostszej integracji oferuje Inteligentny edytor hostowany.

Konfiguracja

Aby użyć ClippingMagic.js zacznij od umieszczenia i zainicjowania go na stronach, na których chcesz zezwolić na edycję:

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

Edytuj pojedynczy obraz

Dla pojedynczego obrazu edytor można wyświetlić w następujący sposób:

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

Funkcja wywołania zwrotnego zostanie wywołana przez result-generated albo editor-exit, ale nie przez obydwa na raz. Każde z nich oznacza, że edytor został zamknięty.

Pomiń albo przekaż false dla useStickySettings aby zastosować fabryczne ustawienia domyślne.

Pamiętaj żeby wykonać to wywołanie po zdarzeniu gotowego dokumentu jako że odwołuje się ono do modelu obiektu dokumentu DOM.

Edytuj wiele obrazów w kolejności

Do edytowania wielu obrazów edytor można wyświetlić w następujący sposób:

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

Funkcja wywołania zwrotnego zostanie wywołana za pomocą result-generated raz dla każdego rezultatu stworzonego przez użytkownika (czyli raz dla każdego kliknięcia "Gotowe"). Na koniec nastąpi jedno wywołanie editor-exit wskazujące, że edytor został zamknięty, kiedy użytkownik kliknie na X albo kiedy zabraknie obrazów do edycji. W przypadku jeśli użytkownik pominie obraz, wywołanie zwrotne nie istnieje.

Pomiń albo przekaż false dla useStickySettings aby zastosować fabryczne ustawienia domyślne.

Pamiętaj żeby wykonać to wywołanie po zdarzeniu gotowego dokumentu jako że odwołuje się ono do modelu obiektu dokumentu DOM.

Wywołanie zwrotne function(opts)

Funkcja edit traktuje funkcję callback jako parametr. Wywołanie zwrotne pozwala odpowiadać na działania użytkownika i zawiadamiać serwer zaplecza o postępach edytowania obrazu.

Podpisem wywołania zwrotnego jest function(opts) i wszelkie wyjątki lub zwrócone wartości są ignorowane. Parametrem opts jest PlainObject zawierający:

edit() można wywołać ponownie od razu po zamknięciu edytora (wywołania poprzedzające spowodują wystąpienie wyjątku).

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

Definicje funkcji

ClippingMagic.initialize(opts) -> array_of_missing_features

Funkcja initialize przyjmuje PlainObject zawierający pary klucz/wartość konfigurujące inicjowanie:

Funkcja zwraca tablicę JavaScript z ciągami opisującymi funkcje brakujące w używanej przeglądarce, które są wymagane do uruchomienia edytora. Jeżeli tablica jest pusta, można przeprowadzić wywołanie funkcji edit.

ClippingMagic.edit(opts, callback)

Funkcja edit przyjmuje następujące parametry:

Ta metoda nie zwraca wartości. Jeżeli przed wywołaniem tej metody nie wywołano initialize lub jeżeli initialize zwróciło niepustą tablicę, lub jeżeli okno edytora jest już otwarte, nastąpi zgłoszenie wyjątku.