Inteligentny edytor hostowany

Najprostszy sposób na zintegrowanie Inteligentnego edytora Clipping Magic z twoim niestandardowym przepływem pracy.

Etapy integracji

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

  1. Przekaż obraz za pomocą serwera API.

  2. Utwórz Adres URL Inteligentnego edytora hostowanego i skieruj tam swojego użytkownika, aby w tym miejscu wycinał określone przez ciebie obrazy.

  3. Po wycięciu wszystkich obrazów, przeglądarka twojego użytkownika nawiguje do określonego Adres zwrotny URL z żądaniem HTTP POST zawierającym odpowiednie informacje dotyczące sesji wycinania.

Jeżeli potrzebujesz rozwiązania typu white label lub wywołania zwrotnego dla każdego wyciętego obrazu zapoznaj się z Inteligentnym edytorem typu white label.

Adres URL Inteligentnego edytora hostowanego https://clippingmagic.com/api/v1/hosted/[apiId]

Możesz utworzyć prosty adres URL, który twój użytkownik otworzy w swojej przeglądarce aby przeglądać i edytować jeden lub więcej twoich obrazów.

Adres URL Inteligentnego edytora hostowanego obsługuje następujące parametry:

images
id1:secret1,id2:secret2,...
123:abc,456:def
Wymagane

Obrazy do wycinania. Rozdzielana przecinkami lista par id:secret. Otrzymujesz je przekazując obraz za pomocą serwera API.

returnUrl
Ciąg
Wymagane

Po zakończeniu wycinania, przeglądarka użytkownika skieruje żądanie HTTP POST do tego adresu URL. Więcej informacji znajduje się poniżej.

useStickySettings
Wartość logiczna
true, false

Jeśli przekażesz useStickySettings=true edytor zastosuje lepkie ustawienia skonfigurowane obecnie dla użytkownika, którego klucz interfejsu API został użyty do przekazania obrazu.

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.

Wartość domyślna: false

hideBottomToolbar
Wartość logiczna
true, false

Ukrywa dolny pasek narzędzi powodując, że ustawienia te nie są dostępne w edytorze.

Wartość domyślna: false

locale
Ciąg

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)

Nowoczesne przeglądarki dopuszczają bardzo długie adresy URL, natomiast w razie potrzeby obsługi starszych przeglądarek i wycinania ponad 30 obrazów w ramach jednej sesji, zamiast używania bezpośredniego linku można przesłać je w żądaniu POST.

Przykładowy URL pojedynczego obrazu



https://clippingmagic.com/api/v1/hosted/123?images=2346:image_secret1&returnUrl=https%3A%2F%2Fclippingmagic.com%2Fapi%2FreturnUrlExample

W przypadku wskazania pojedynczego obrazu edytor nie posiada przycisku "pomiń", ani nie pokazuje liczby obrazów pozostałych do wycięcia.

Przykładowy URL wielu obrazów



https://clippingmagic.com/api/v1/hosted/123?images=2346:image_secret1,2347:image_secret2&returnUrl=https%3A%2F%2Fclippingmagic.com%2Fapi%2FreturnUrlExample

W przypadku wskazania wielu obrazów edytor posiada przycisk "pomiń" i pokazuje liczbę obrazów pozostałych do wycięcia.

Adres zwrotny URL

Po zakończeniu wycinania, przeglądarka użytkownika skieruje żądanie HTTP POST do określonego Adres zwrotny URL. Treść żądania POST będzie zawierać pojedynczy parametr: clippingMagicJson. Parsowanie treści tego parametru powoduje rozpakowanie do obiektu JSON z informacjami o obrazach, które zostały wycięte. Można wtedy pobrać dostępne teraz rezultaty używającserwera pobierania interfejsu API.

event
Enum
editor-exit, error

editor-exit oznacza, że sesja wycinania została zakończona pomyślnie.

error oznacza, że wystąpił błąd i że error poniżej jest wypełniony.

images
[{"id":1,"secret":"secret1"},{"id":2,"secret":"secret2"},{"id":3,"secret":"secret3"},{"id":4,"secret":"secret4"}]
Tablica z obrazami przekazanymi w adresie URL inteligentnego edytora hostowanego.
clipped
[{"id":1,"secret":"secret1"},{"id":2,"secret":"secret2"}]
Tablica z obrazami faktycznie wyciętymi w ramach tej sesji, czyli obrazami dla których użytkownik kliknął w edytorze "gotowe".
skipped
[{"id":3,"secret":"secret3"},{"id":4,"secret":"secret4"}]
Tablica z obrazami pominiętymi w tej sesji, czyli obrazami dla których użytkownik kliknął w edytorze "pomiń".

W przypadku jeśli event=error, pojawi się obiekt członkowski error wypełniony następującymi danymi:

error.status
Liczba całkowita
Kod podobny do stanu HTTP. 4xx oznacza błąd wywołującego. 5xx oznacza błąd serwera wewnętrznego.
error.code
Liczba całkowita
Numer stanowiący unikatowy identyfikator błędu, który wystąpił.
error.message
Ciąg
Czytelny dla użytkownika komunikat o błędzie opisujący błąd, który wystąpił.

Aby żądanie POST powiodło się, należy albo wyłączyć kontrole CSRF albo dodać token CSRF do Adres zwrotny URL.

Jeżeli użytkownik zamknie przeglądarkę lub używany adres URL inteligentnego edytora hostowanego jest niemożliwy do przeanalizowania, adres zwrotny URL nie zostanie wywołany.

Przykład powodzenia clippingMagicJson dekoduje do:
{
  "event" : "editor-exit",
  "images" : [ {
    "id" : 2346,
    "secret" : "image_secret1"
  }, {
    "id" : 2347,
    "secret" : "image_secret2"
  } ],
  "clipped" : [ {
    "id" : 2346,
    "secret" : "image_secret1"
  }, {
    "id" : 2347,
    "secret" : "image_secret2"
  } ],
  "skipped" : [ ]
}
Przetestuj swój adres zwrotny URL
Przykład błędu clippingMagicJson dekoduje do:
{
  "event" : "error",
  "error" : {
    "status" : 400,
    "code" : 1234,
    "message" : "Example error"
  },
  "images" : [ {
    "id" : 2346,
    "secret" : "image_secret1"
  }, {
    "id" : 2347,
    "secret" : "image_secret2"
  } ],
  "clipped" : [ ],
  "skipped" : [ {
    "id" : 2346,
    "secret" : "image_secret1"
  }, {
    "id" : 2347,
    "secret" : "image_secret2"
  } ]
}
Przetestuj swój adres zwrotny URL