Смарт-редактор White Label

ClippingMagic.js позволяет удобно интегрировать редактор Clipping Magic в ваш собственный веб-сайт. Вы можете редактировать отдельные изображения, как на первой странице, или последовательность изображений, как при пакетной обрезке.

Порядок интеграции

Прежде всего обязательно прочитайте Быстрый старт.

  1. Загрузите изображение, используя API сервера.

  2. Встройте умный редактор White Label, как описано ниже.

  3. Реагируйте на обратные вызовы, полученные вашим кодом, по мере того, как ваш оператор обрезает изображения, например дав инструкцию внутреннему серверу скачать новые доступные результаты.

Этот вариант интеграции предоставляет вам полный контроль, но требует более глубокой интерфейсной интеграции. Если вам нужен более простой вариант интеграции, посмотрите Размещенный умный редактор.

Настройка

Чтобы использовать ClippingMagic.js, начните с того, что включите и инициализируйте его на страницах, где вы хотите разрешить редактирование:

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

Редактировать одно изображение

Редактор для одного изображения можно показать следующим образом:

ClippingMagic.edit({
    "image" : {
      "id" : 2345,
      "secret" : "image_secret"
    },
    "useStickySettings" : true,
    "locale" : "ru-RU"
  }, myCallback);

Функция обратного вызова будет вызываться или result-generated или editor-exit, но не обоими событиями. Каждое из них указывает на то, что редактор закрыт.

Пропустите или передайте false в качестве useStickySettings, чтобы использовать заводские настройки.

Обязательно выполните этот вызов после события готовности документа, поскольку он ссылается на DOM.


Редактировать несколько изображений по очереди

Редактор для редактирования нескольких изображений можно показать следующим образом:

ClippingMagic.edit({
    "images" : [ {
      "id" : 2345,
      "secret" : "image_secret"
    }, {
      "id" : 2346,
      "secret" : "image_secret2"
    } ],
    "useStickySettings" : true,
    "locale" : "ru-RU"
  }, myCallback);

Функция обратного вызова будет вызываться result-generated один раз для каждого результата, созданного пользователем (= после каждого нажатия на 'Готово'). В конце будет один вызов editor-exit, указывающий, что редактор был закрыт либо пользователем, нажавшим на X, либо из-за того, что закончились изображения для редактирования. Если пользователь пропустит изображения, обратного вызова не будет.

Пропустите или передайте false в качестве useStickySettings, чтобы использовать заводские настройки.

Обязательно выполните этот вызов после события готовности документа, поскольку он ссылается на DOM.


Обратный вызов function(opts)

Функция edit принимает функцию callback в качестве параметра. Этот обратный вызов позволяет вам реагировать на действия пользователя и уведомлять внутренний сервер о ходе редактирования изображений.

Сигнатура обратного вызова - function(opts), а любые возвращаемые исключения или значения игнорируются. Параметр opts - это PlainObject, содержащий:

event

Строка, показывающая, что только что произошло, см. в таблице ниже.

image Необязательно. JSON объект изображения (включены только идентификатор и секрет).
error Необязательно. JSON объект ошибки.
СобытиеЕсть изображение?Есть ошибка?Значение
result-generatedДаНет Пользователь нажал «Готово», результат создан и готов к немедленному скачиванию с помощью внутреннего API. Редактор был закрыт в режиме одного изображения.
editor-exitНетНет Пользователь закрыл редактор, нажав на красный Х в правом верхнем углу, или у пользователя закончились изображения для редактирования в режиме нескольких изображений. Редактор был закрыт.
errorНетДа Произошла ошибка. Для получения дополнительной информации проверьте значение error. Редактор был закрыт.

Как только редактор будет закрыт, вы сможете снова вызвать edit() (вызовы, сделанные до этого, приводят к исключению).

Пример вызова обратного вызова

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

Определения функции

ClippingMagic.initialize(opts) -> array_of_missing_features

Функция initialize принимает PlainObject, содержащий пары ключ/значение, которые настраивают инициализацию:

apiId
Обязательно
Идентификатор вашего API.

Функция возвращает массив JavaScript со строками, описывающими функции, которые отсутствуют в текущем браузере, но необходимы для запуска редактора. Если этот массив пуст, вы можете вызвать функцию edit.

ClippingMagic.edit(opts, callback)

Функция edit принимает следующие параметры:

opts

Обязательно. PlainObject, содержащий пары ключ/значение, которые настраивают инициализацию:

image

Необязательно. JSON объект изображения (необходимы только идентификатор и секрет).

images

Необязательно. Массив JSON объекты изображения (необходимы только идентификатор и секрет).

useStickySettings

Необязательно. Логическое значение, true означает, что будут использоваться липкие настройки пользователя API, false или пропуск означает, что будут использоваться заводские настройки по умолчанию.

Это позволяет вам один раз настроить базовые параметры обрезки, а затем применять их ко всем редактируемым изображениям.

Read about how to configure the sticky settings

Предварительная обрезка недоступна в API, но вы можете настроить ограничение размера изображения в вызове загрузки API.

locale

Необязательно. Язык отображения для редактора. В случае пропуска по умолчанию используется английский. Допустимые значения:

КодЯзык отображения
en-US English (английский)
de-DE Deutsch (немецкий)
es-ES Español (испанский)
fr-FR Français (французский)
hi-IN हिन्दी (хинди)
id-ID Indonesia (индонезийский)
it-IT Italiano (итальянский)
ja-JP 日本語 (японский)
ko-KR 한국어 (корейский)
pl-PL Polski (польский)
pt-BR Português (португальский)
ru-RU Русский (русский)
th-TH ไทย (тайский)
tr-TR Türkçe (турецкий)
vi-VN Tiếng Việt (вьетнамский)
zh-Hans-CN 简体中文 (китайский)
zh-Hant-TW 繁體中文 (китайский)
callback

Обязательно. См. подробности выше в разделе «Обратный вызов».

Этот метод не дает значения. Если перед вызовом этого метода не был вызван initialize или если initialize вернул непустой массив, или если окно редактора уже открыто, выдается исключение.