×

Our database will undergo scheduled maintenance for 1 hour starting 7,7 hours from now.

Strona internetowa będzie sporadycznie niedostępna w tym czasie.

Inteligentny edytor typu white label

Dzięki ClippingMagic.js możesz łatwo zintegrować edytor Clipping Magic ze swoją witryną internetową. Możesz edytować pojedyncze obrazy tak jak na stronie początkowej, albo sekwencję obrazów tak jak w wycinaniu zbiorczym.

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

event

Ciąg wskazujący co się zdarzyło, patrz tabela poniżej.

image Opcjonalne. Obiekt JSON obrazu (zawiera jedynie identyfikator i tajny wpis).
error Opcjonalne. Obiekt JSON błędu.
ZdarzeniePosiada obraz?Posiada błąd?Znaczenie
result-generatedTakNie Użytkownik kliknął "Gotowe", wygenerowano rezultat, który jest dostępny do natychmiastowego pobrania przy użyciu interfejsu API zaplecza. W trybie pojedynczego obrazu edytor został zamknięty.
editor-exitNieNie Użytkownik zamknął edytor klikając czerwony X w prawym górnym rogu lub w trybie wielu obrazów zabrakło obrazów do edycji. Edytor został zamknięty.
errorNieTak Wystąpił błąd. Aby uzyskać więcej informacji sprawdź wartość error. Edytor został zamknięty.

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

Przykład wywołania funkcji wywołania zwrotnego

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

Definicje funkcji

ClippingMagic.initialize(opts) -> array_of_missing_features

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

apiId
Wymagane
Twój identyfikator interfejsu API.

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:

opts

Wymagane. PlainObject zawierający pary klucz/wartość, które konfigurują inicjowanie:

image

Opcjonalne. Obiekt JSON obrazu (wymagany jest jedynie identyfikator i tajny wpis).

images

Opcjonalne. Tablica Obiekty JSON obrazu (wymagany jest jedynie identyfikator i tajny wpis).

useStickySettings

Opcjonalne. Wartość logiczna, true oznacza, że użyte zostaną lepkie ustawienia użytkownika interfejsu API, false lub pominięte oznacza, że użyte zostaną fabryczne ustawienia domyślne.

Dzięki temu podstawowe ustawienia wycinania można skonfigurować tylko raz, a później stosować je do wszystkich edytowanych obrazów.

Read about how to configure the sticky settings

Wstępne przycinanie nie jest dostępne przez interfejs API, w funkcji przekazania przez interfejs API można natomiast skonfigurować limit rozmiaru obrazu.

locale

Opcjonalne. Język wyświetlania używany w edytorze. Pominięcie powoduje domyślne ustawienie angielskiego. Prawidłowe wartości to:

KodJęzyk wyświetlania
en-US English (angielski)
de-DE Deutsch (niemiecki)
es-ES Español (hiszpański)
fr-FR Français (francuski)
hi-IN हिन्दी (hindi)
id-ID Indonesia (indonezyjski)
it-IT Italiano (włoski)
ja-JP 日本語 (japoński)
ko-KR 한국어 (koreański)
pl-PL Polski (polski)
pt-BR Português (portugalski)
ru-RU Русский (rosyjski)
th-TH ไทย (tajski)
tr-TR Türkçe (turecki)
vi-VN Tiếng Việt (wietnamski)
zh-Hans-CN 简体中文 (chiński)
zh-Hant-TW 繁體中文 (chiński)
callback

Wymagane. Szczegółowe informacje zawiera sekcja dotycząca Wywołania zwrotnego.

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.