Расширенные настройки редактора

Режим "белая доска"

Опция whiteBoard позволяет построить редактор в режиме "белой доски". Нужно лишь указать в ней ширину и высоту необходимой "белой доски".

Пример:

<!-- WML -->
<ImageEditor2.editor:Simple
   attr:style="width: 1800px;height: 900px;max-width: 1800px;max-height: 900px;">
   <ws:whiteBoard width="{{ 500 }}" height="{{ 500 }}"/>
</ImageEditor2.editor:Simple>

Основной инструмент

По умолчанию основным инструментом редактирования явлется стрелка. Но вы можете выбрать любой из предоставленных, используя опцию activeTool. Выбранный инструмент будет активирован при открытии редактора.

Провайдер настроек

Редактор изображений хранит выбранные настройки (цвет, толщина линий и стрелок, размер текста) с помощью ParametersWebAPI/Scope. Но в ряде случаев необходимо реализовать свое хранилище. Для этого вам потребуется:

  1. Реализовать класс провайдера с помощью интерфейса IUserParamsProvider;
  2. Передать его в опцию userSettingsProvider.

Пример реализации провайдера для скриштера СБИС3 Плагина:

CustomSettingsProvider.ts

// ...
import { IUserParams, IUserParamsProvider } from 'ImageEditor2/editor';
import * as bLHelper from 'SBISPluginBase/Utils/BLHelper';
 
export default class CustomSettingsProvider implements IUserParamsProvider {
   // ...
    
   getUserParams(): Promise {
      return bLHelper.callService('Screenshot', 'Settings', 'Get', {
         section_name: 'Screenshot',
         key: 'EditorParams'
      });
   }
     
   setUserParams(data: IUserParams): Promise {
      return bLHelper.call('Screenshot', 'Settings', 'Set', {
         section_name: 'Screenshot',
         key: 'EditorParams',
         val: data
      });
   }
}

Формат сохраненного изображения

В опции saveOptions можно указать, в каком формате сохранить отредактированное изображение. По умолчанию изображение сохранится в формате png.

Открытие редактора бесшовно

Если вам необходимо открыть редактор изображений из просмотра, сохранив при этом положение изображения на странице, масштаб и поворот, то необходимо использовать опцию openOptions.

Настройка пропорционального кадрирования

Часто требуется обрезать изображение под определенные пропорции (например, баннеры для новостей или юзерпик пользователя). Для этого необходимо указать опцию cropOptions.

Пример:

<!-- WML -->
<ImageEditor2.editor:Simple
    attr:style="width: 1800px;height: 900px;max-width: 1800px;max-height: 900px;">
    <ws:source preview="../path_to_image" />
    <ws:cropOptions x="{{ 1 }}" y="{{ 2 }}" minSize="{{ 100 }}" />
</ImageEditor2.editor:Simple>

Использование cropOptions

При использовании опции cropOptions область обрезки отображается сразу при включении режима кадрирования