GrapeCity Documents v6 представляет первый общедоступный выпуск элемента управления GrapeCity Documents Image Viewer (далее именуемого GcImageViewer), клиентского элемента управления просмотрщиком изображений на основе JavaScript, который позволяет загружать , просматривать, редактировать и сохранять изображения в веб-приложениях. Он поддерживается всеми современными браузерами и легко интегрируется с основными фреймворками. Пересмотрите этот блог из последнего релиза, чтобы получить подробное введение в управление.
В этом блоге мы сосредоточимся на различных функциях редактирования, предлагаемых GcImageViewer, а также на том, как можно использовать клиентский API для создания или изменения существующего изображения.
Для начала нам нужно понять, что GcImageViewer предоставляет несколько встроенных функций, таких как загрузка изображения, масштабирование, навигация и т. д. Кроме того, он даже предоставляет несколько плагинов, которые расширяют функциональность GcImageViewer, так реализованы инструменты редактирования. для GcImageViewer.
Итак, давайте начнем с изучения доступных плагинов и предоставляемых ими функций редактирования.
Плагины GcImageViewer
GcImageViewer поставляется с набором плагинов, которые помогают вам добавлять и удалять функции редактирования в средстве просмотра в соответствии с вашими требованиями, что помогает контролировать размер приложения.
Два плагина, предлагаемые GcImageViewer, описаны ниже:
- Подключаемый модуль PageTools. Подключаемый модуль PageTools предоставляет инструменты поворота, отражения, обрезки и изменения размера для редактирования изображений. Он добавляет кнопку Инструменты страницы на основную панель инструментов средства просмотра. При нажатии на нее отображается дополнительная панель инструментов со всеми инструментами редактирования изображения, включая инструменты поворота, отражения, обрезки и изменения размера.
Вот краткий обзор кнопки панели инструментов Page Tools вместе со вспомогательной панелью инструментов:
ПРИМЕЧАНИЕ. Подключаемый модуль PageToolsPlugin заменил подключаемый модуль RotationPlugin, доступный в последнем выпуске.
2. Подключаемый модуль ImageFilters. Подключаемый модуль Image Filters позволяет применять эффекты фильтра к изображениям, что помогает изменить внешний вид изображения. Он предоставляет четыре предопределенных фильтра: Инверсия, Оттенки серого, Смещение синего и Ретро-фиолетовый. По умолчанию подключаемый модуль «Фильтры изображений» добавляет боковую панель с кнопкой «Фильтр изображений», которая расширяет боковую панель для отображения предварительного просмотра эффектов изображения при нажатии.
Вот краткий обзор кнопки боковой панели «Фильтры изображений» вместе с превью изображений:
Кроме того, аналогично кнопке «Инструменты страницы» можно отобразить кнопку «Фильтры изображений» на основной панели инструментов, при нажатии которой отображаются эффекты фильтра изображений на дополнительной панели инструментов. На изображении ниже показано то же самое:
Как добавить плагины
Методы addPlugin и removePlugin класса GcImageViewer помогают добавлять/удалять подключаемые модули в/из GcImageViewer соответственно. Фрагменты кода ниже показывают, как добавить PageToolsPlugin и ImageFiltersPlugin в GcImageViewer.
Добавьте плагин PageToolsPlugin в GcImageViewer:
//Initialize GcImageViewer
var viewer = new GcImageViewer("#root");
// Create Page Tools plugin:
var pageToolsPlugin = new PageToolsPlugin();
// Add Page Tools plugin to GcImageViewer:
viewer.addPlugin(pageToolsPlugin);
Добавьте плагин ImageFilters в GcImageViewer:
//Initialize GcImageViewer
var viewer = new GcImageViewer("#root");
// Create Image Filters plugin:
const imageFiltersPlugin = new ImageFiltersPlugin();
// Add Image Filters plugin to GcImageViewer:
viewer.addPlugin(imageFiltersPlugin);
Плагины — это гораздо больше, включая удаление плагинов и настройку панели инструментов; подробности см. в документации.
Со всеми инструментами редактирования пришло время углубиться в детали того, как можно редактировать изображения, используя все инструменты, предоставляемые GcImageViewer. Следующие разделы посвящены тому же.
Редактировать изображения
GcImageViewer позволяет редактировать существующие изображения с помощью параметров пользовательского интерфейса, доступных в GcImageViewer после добавления соответствующих плагинов, или с помощью многофункционального API на стороне клиента.
В этом разделе мы рассмотрим все различные способы, которыми GcImageViewer помогает пользователям редактировать существующее изображение.
Повернуть изображение
Поворот изображений для просмотра под оптимальным углом является обычным требованием. PageToolsPlugin добавляет кнопку поворота на дополнительную панель инструментов Page Tools, которая позволяет поворачивать изображение на угол 90 градусов по часовой стрелке, многократно нажимая кнопку.
GIF ниже показывает, как это работает:
Также можно установить угол поворота с помощью кода, используя метод rotate класса PageToolsPlugin. Подробности реализации смотрите в документации.
Перевернуть изображение
Перевернутое изображение позволяет просматривать зеркально перевернутое изображение вдоль горизонтальной или вертикальной оси. Плагин PageToolsPlugin добавляет кнопки отражения по горизонтали и вертикали на дополнительной панели инструментов Page Tools, которые позволяют переворачивать изображение по горизонтали или по вертикали.
GIF ниже показывает это в действии:
Также можно перевернуть изображение через код, используя методы flipHorizontal и flipVertical класса PageToolsPlugin. Подробности реализации смотрите в документации.
Обрезать изображение
Изображения обычно обрезают, чтобы сфокусировать внимание на определенной части изображения или удалить нежелательные объекты с изображений. Плагин PageToolsPlugin добавляет кнопку обрезки на дополнительную панель инструментов Page Tools, которая отображает диалоговое окно «Обрезка» при нажатии.
Диалоговое окно обрезки позволяет указать координаты, высоту и ширину в верхнем левом углу, чтобы определить область обрезки изображения. Он также предоставляет раскрывающийся список Соотношение сторон, который автоматически регулирует высоту или ширину изображения, когда пользователь выбирает один из вариантов, применяя желаемое соотношение сторон к обрезанному изображению. В диалоговом окне также имеется кнопка Сброс, позволяющая вернуть исходный размер изображения.
Вы даже можете обрезать изображение напрямую, перетаскивая пунктирные края изображения, которые также появляются при нажатии кнопки «Обрезать изображение».
На приведенном ниже GIF-файле показано использование диалогового окна «Обрезка», а также пунктирные края для обрезки изображения:
Также возможно обрезать изображение с помощью кода, используя метод обрезки класса PageToolsPlugin. Подробности реализации смотрите в документации.
Изменить размер изображения
Изменение размера изображений является очень распространенным требованием, и может быть множество причин, по которым пользователь хотел бы изменить размер изображения. Плагин PageToolsPlugin добавляет кнопку изменения размера на дополнительную панель инструментов Page Tools, при нажатии на которую отображается диалоговое окно «Изменить размер».
Диалоговое окно «Изменить размер» позволяет указать ожидаемую ширину и высоту изображения. Он также содержит кнопку-переключатель Сохранить соотношение сторон, позволяющую сохранить или игнорировать соотношение сторон при изменении размера. Когда этот параметр включен и задано одно из измерений, средство просмотра автоматически вычисляет значение другого измерения на основе соотношения сторон.
GIF ниже показывает, как это работает:
Также можно изменить размер изображения с помощью кода, используя метод resize класса PageToolsPlugin. Подробности реализации смотрите в документации.
Применить фильтры изображений
Фильтры изображения применяются для изменения внешнего вида изображения по умолчанию путем изменения цветов пикселей. Плагин ImageFiltersPlugin добавляет кнопку фильтра на боковую панель, которая при нажатии разворачивает боковую панель для отображения предварительного просмотра эффектов изображения. Щелчок по любому из этих эффектов применяет фильтр к изображению.
GIF ниже показывает фильтры в действии:
Также можно применить фильтр к изображению с помощью кода, используя метод applyFilter класса ImageFiltersPlugin. Подробности реализации смотрите в документации.
Отменить повтор операций
Упражнение по редактированию завершается только возможностью отмены и повторного редактирования, так как и то, и другое идет рука об руку. GcImageViewer решает эту проблему, добавляя кнопки отмены и повтора на основную панель инструментов средства просмотра, предоставляя встроенные функции отмены и повтора. Пользователю необходимо нажать соответствующую кнопку на панели инструментов, чтобы отменить последнее действие или повторить следующее действие.
Вот краткий обзор средства просмотра, демонстрирующего кнопки отмены и повтора на основной панели инструментов в действии:
По умолчанию параметры отмены/возврата, доступные на основной панели инструментов GcImageViewer, включены; эти параметры можно отключить, задав в коде свойство отменить элемента ViewerOptions.
Клиентский API также позволяет выполнять операции отмены и повтора с помощью кода. Через API поддерживается множество других операций отмены/повтора, включая определение пользовательской команды отмены. Обратитесь к документации за более подробной информацией.
Создание и изменение изображений
Наконец, давайте кратко обсудим еще одну интересную и полезную функцию, предлагаемую клиентским API GcImageViewer. Это позволяет вам создать изображение с нуля или изменить существующее изображение, нарисовав его. После этого вы можете сохранить новое изображение на локальный диск. Подробности реализации смотрите в демонстрациях и документации.
Изучите демонстрации и документацию GcImageViewer и сообщите нам, чего еще вы хотели бы добиться с помощью этого элемента управления.
Первоначально опубликовано на https://www.grapecity.com 15 декабря 2022 г.
