Crop (Обрезка изображений с помощью скрипта Cropper.js) + Drag&Drop&Scale (Перетаскивание и масштабирование изображения)

13.12.22

Разработка - Работа с интерфейсом

Простейший пример реализации Crop изображения с помощью поля html-документа и js-скрипта (Cropper.js) + отдельно функция Drag&Drop + Scale для картинки. Для обычных и управляемых форм. Тестировалось на 18 платформе, должно работать на любой >=14.

Скачать файлы

Наименование Файл Версия Размер
Crop (Обрезка изображений с помощью скрипта Cropper.js) + Drag&Drop&Scale (Перетаскивание и масштабирование изображения)
.epf 265,41Kb
41
.epf 265,41Kb 41 Скачать бесплатно

Сам crop (обрезка) картинки делается с помощью скрипта Cropper.js, сам скрипт, и исходники на этой странице. Из оригинала вырезаны часть кнопок и добавлен превью-результат. Сделано на платформе 8.3.14.

Масштабирование и Drag&Drop - через стиль картинки и transform.

 

Свои html-странички и их взаимодействие со стилями/скриптами проще всего рисовать в каких-нибудь online-редакторах, типа codepen.io, достаточно просто скопировать исходный код любой html-странички в редактор и там поправить, сразу видя результат.

Для встраивания скрипта в свои формы нужно разместить текст html документа и скриптов/стилей, для этого проще использовать макеты обработки. Для html макет с типом HTML, для js-скриптов - двоичные данные, для стилей и фоновой начальной картинки - просто текст. 

На форму кидается элемент управления ПолеHTML, ему в ПриОткрытии() устанавливается текст html-странички из макета.

Из макетов извлекаются файлы скриптов и записываются во временный каталог:

Процедура ПолучитьСкриптИзДвоичныхДанных(ТекстШаблона,ИмяМакета)
    ИмяВременногоФайла = ПолучитьИмяВременногоФайла("js");
    ДанныеМакета(ИмяМакета).Записать(ИмяВременногоФайла);
	ТекстШаблона = СтрЗаменить(ТекстШаблона,"%"+ИмяМакета, ИмяВременногоФайла);
КонецПроцедуры

В самом тексте html странички, просто, через СтрЗаменить() заменяются маркеры на реальные пути к js-файлам.

Аналогично, часть стилей, извлекается из текста макета и заменяется просто текстом.

Фоновая картинка хранится как строка в Base64 в отдельном макете.

В шаблоне html странички это выглядит так:

<style>%Стиль1</style>
<style>%Стиль2</style>

...............

<script src="%Скрипт2"> </script>
<script src="%Скрипт3"> </script>

На выходе, при работе основного скрипта,  "кропнутая" картинка (получается как готовая строка Base64) может быть потом использована в коде где угодно, в данном примере, передается во второе поле html документа, в котором показан простейший скрипт для переноса и масштабирования картинки (может быть использован в своих конфигурациях для показа картинки). 

Масштабирование производится колесом мыши. Само масштабирование реализовано в скрипте через стиль и свойство transform + создание 3-переменных, хранящих x,y координату и масштаб:

<style>
	    .element {
	      --x: 0px;  /* переменная стиля для координаты X перемещения элемента */
	      --y: 0px; /* переменная стиля для координаты Y перемещения элемента */
	      --t: 1;  /* переменная стиля для координаты масштаба элемента */
	      transform: translate(var(--x), var(--y)) scale(var(--t)); /* трансформация элемента сдвиг и масштаб */

В событиях скрипта, меняем эти координаты  - соответственно, меняется положение и масштаб.

В событии движении мыши (mousemove) если нажата левая клавиша меняем x,y координату картинки :

element.style.setProperty('--x', `${e.pageX - startX}px`)
element.style.setProperty('--y', `${e.pageY - startY}px`)

В событии колеса - масштаб:

	var i=1;
		ball.onwheel = function(event) { /* событие колеса мыши */
		   if(event.deltaY > 0) {   /* уменьшаем/увеличиваем шаг масштаба при прокрутке колеса */
		      i -= 0.1;
		   } else {
		      i += 0.1;
		   }
		    ball.style.setProperty('--t', i); /* устанавливаем свойство стиля картинки, которое через transform scale ('--t') изменит размер */

Чтобы поймать событие js-скрипта в 1с, создаем 2 пустых невидимых контейнера в html - странички, в них будем помещать событие кропа (нажатия на соответствующую кнопку) и саму кропнутую картинку в виде строки в Base64.

 

<div id="BufferData" style="display:none"></div>
<div id="EventName" style="display:none"></div>

в основном js-скрипте (макет Скрипт1), просто помещаем кропнутую картинку в этот контейнер:

document.getElementById ("EventName").innerHTML = 'Crop';
document.getElementById ("BufferData").innerHTML = result.toDataURL('image/jpeg');

в самой 1с-ине, в событии поля HTML ПриНажатии(onclick) получаем из этих двух контейнеров содержимое, если это "наше" событие, в данном случае, "Crop", то получаем готовую картинку из контейнера и очищаем его:

 

    ИмяСобытия = Элемент.Документ.getElementById ("EventName").innerHTML;
    Если ИмяСобытия = "Crop" Тогда
        // очищаем содержимое контейнера 
        Элемент.Документ.getElementById ("EventName").innerHTML = "";
        // получаем параметры из контейнера 
        BufferData = Элемент.Документ.getElementById ("BufferData").innerHTML;
    
        //КартинкаСтрокой64 = Сред(BufferData,СтрНайти(BufferData,",")+1); //если нужна картинка кладём её куды ннадо.
        ТекстМакета = ТекстМакета("РезультатHTML");  
        ЭлементыФормы.ПолеHTMLДокумента2.УстановитьТекст(СтрЗаменить(ТекстМакета,"%1", BufferData));//СтрШаблон(ТекстМакета,BufferData); //просто помещаем в шаблон поля кропнутую картинку
    КонецЕсли;    

jscript html crop drag drop transform scale

См. также

Богатый редактор картинок, хранимых в базе, с возможностью РИСОВАНИЯ. Редактор внешних файлов картинок. Объект, расширяющий возможности работы с картинками из встроенного языка (Три в одном) + Обработка «Стандартизация картинок»

Работа с интерфейсом Рабочее место Платформа 1С v8.3 Управляемые формы Конфигурации 1cv8 Платные (руб)

Обработка предназначена для редактирования картинок в режиме «Предприятие», с возможностью РИСОВАТЬ на них. Поддерживается работа как в обычных формах (толстый клиент) так и на управляемых формах (тонкий клиент). Обработка позволяет редактировать как картинки, хранимые в базе, так и графические файлы с диска на файловой системе. Помимо базовых функций (изменение размеров, преобразование формата, обрезание картинки, повороты и т.п.) – редактор имеет богатый набор инструментов для рисования. Доступна функция вставки изображения из буфера обмена. Также обработка может быть использована из встроенного языка как объект для редактирования картинок. Объект может быть использован: на стороне клиента, на стороне сервера, из внешнего соединения. Данная обработка будет особенно полезна тем, кто вносит картинки в базу (изображения номенклатуры, фотографии физических лиц и т.п.). Функционал реализуется с использованием JavaScript и бесплатного ПО ImageMagick (без использования внешних компонент).

6000 руб.

16.01.2015    61789    43    59    

80

[Расширения] Динамическое управление видимостью и доступностью элементов форм (УФ) (8.3.6+)

Работа с интерфейсом Платформа 1С v8.3 Управляемые формы Конфигурации 1cv8 Платные (руб)

Механизм «Динамическое управление доступом к элементам форм объектов 1С8» предназначен для обеспечения возможности оперативного управления видимостью и доступностью элементов форм документов и справочников продуктов фирмы «1С» «1С:Предприятие 8». Решение универсальное, встраивается в любую конфигурацию с минимальными доработками, что позволяет без проблем обновлять типовые решения.

5000 руб.

14.01.2016    54392    16    21    

42

Управление дашбордами

Работа с интерфейсом Платформа 1С v8.3 Конфигурации 1cv8 Платные (руб)

Обработка предназначена для создания и управления дашбордами.

2400 руб.

29.06.2020    16693    21    4    

35

Новогоднее оформление для 1С

Работа с интерфейсом Платформа 1С v8.3 1С:Бухгалтерия 3.0 1С:Управление торговлей 11 1С:Зарплата и Управление Персоналом 3.x 1С:Управление нашей фирмой 3.0 Бесплатно (free)

Добавьте новогоднего настроения! Расширение создает декорацию в виде гирлянды на некоторых формах объектов.

27.12.2023    10729    750    elcoan    45    

106

Конструктор HTML, CSS и javascript

Инструментарий разработчика Работа с интерфейсом Платформа 1С v8.3 Конфигурации 1cv8 Абонемент ($m)

Подходит для создания web-страниц для замены управляемых форм 1С, красивых отчетов, интерфейса мобильного приложения на платформе 1С и для простых страниц веб-сайтов.

2 стартмани

10.04.2023    9600    151    acces969    31    

118

Модель состояния для MVC

Работа с интерфейсом Платформа 1С v8.3 Конфигурации 1cv8 Абонемент ($m)

"MVC плохо применима в 1С" - познакомьтесь с моделью состояния и, возможно, ваше мнение поменяется! Представленное решение является эволюционным развитием идеи реализации MVC для 1С. В новой версии добавлены DSL для описания модели состояния, а также параметризация свойств параметров и элементов формы.

1 стартмани

05.07.2022    3662    kalyaka    2    

27

Табло очереди заказов на экран телевизора

WEB-интеграция Работа с интерфейсом Платформа 1С v8.3 1С:Розница 2 Платные (руб)

Связка из веб-приложения и расширения для 1С: Розница 2.3.

3600 руб.

29.04.2022    12075    1    5    

10
Комментарии
В избранное Подписаться на ответы Сортировка: Древо развёрнутое
Свернуть все
1. bprogs 188 14.12.22 22:11 Сейчас в теме
Хорошая штука этот cropper, можно какие то дизайнерские работы продавать через конфигурацию или как то ее обрабатывать, честно применение не найду этому кропперу, у вас какая задача была?
2. papami 55 15.12.22 12:30 Сейчас в теме
(1) У меня была задача, с применением аналогичного инструмента. Обработку фото делал на C#. Ком. предложение на продажу автомобиля с определенным дизайном, в котором изображение должно быть с определенным соотношением сторон и "скругленные" края. Т.е. машину сфотографировали, а при загрузке в 1С сразу делается приведение к нужному формату.
Оставьте свое сообщение