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

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

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

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" : 2346,
      "secret" : "image_secret1"
    },
    "useStickySettings" : true,
    "hideBottomToolbar" : false,
    "locale" : "ru-RU"
  }, myCallback);

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ClippingMagic.initialize(opts) -> array_of_missing_features

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

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

ClippingMagic.edit(opts, callback)

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

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