Вставка картинки из буфера обмена (на выбор: JavaScript / внешняя компонента / штатно)

11.11.21

Разработка - Разработка внешних компонент

Вставка картинки из буфера обмена с помощью JavaScript в поле HTML в web-клиенте, с помощью внешней компоненты в тонком/толстом клиенте и путем преобразования данных картинки формата Base64 из поля HTML в любом клиенте, начиная с платформы 8.3.16. Механизм протестирован на платформах 8.2 и 8.3 Для запуска опубликованной конфигурации требуется платформа релиза не ниже 8.3.14.

Скачать файл

ВНИМАНИЕ: Файлы из Базы знаний - это исходный код разработки. Это примеры решения задач, шаблоны, заготовки, "строительные материалы" для учетной системы. Файлы ориентированы на специалистов 1С, которые могут разобраться в коде и оптимизировать программу для запуска в базе данных. Гарантии работоспособности нет. Возврата нет. Технической поддержки нет.

Наименование По подписке [?] Купить один файл
Вставка картинки из буфера обмена.:
.dt 1,68Mb
17
17 Скачать (1 SM) Купить за 1 850 руб.

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

И так, для своей разработки Тикеты - система учета задач/Service Desk в 1С (интеграция с Trello, Мобильное приложение) необходимо было реализовать вставку картинки из буфера.
Задача была получать картинку по нажатию Ctrl+V в поле HTML.

Глядя как приложения браузеров ловко кушают эти самые скриншоты, подумалось, почему же в 1С поле HTML не сможет так же !
Оказалось, что может, но лишь наполовину - в web-клиенте, а в тонком/толстом данных картинки JavaScript не выдает (ну или плохо просили).
Для тонкого/толстого пришлось писать компоненту.

Обновлено 10.02.2021: начиная с версии платформы 8.3.16, картинка из буфера вставляется в поле HTLM по Ctrl+V в любом клиенте на любых формах (управляемые, обычные), ниже код перевода данных картинки из Base64 в двоичные данные из поля HTLM (необходимо обрабатывать событие "При нажатии" и проверять содержимое поля): 

   ПолеКомментария = Элементы.Комментарий;
    ПолеВводаКомментария = ПолеКомментария.Документ.getElementById("comment");
    Если ПолеВводаКомментария <> Неопределено Тогда
        ПозНачало = Найти(ПолеВводаКомментария.innerHTML, "<img src=""data:image/");
        Если ПозНачало > 0 Тогда
            ПраваяЧасть = Прав(ПолеВводаКомментария.innerHTML, СтрДлина(ПолеВводаКомментария.innerHTML) - ПозНачало - 20);
            Поз = Найти(ПраваяЧасть, ";base64,");
            Если Поз > 0 Тогда
                Расширение = Лев(ПраваяЧасть, Поз - 1);
                ПраваяЧасть = Прав(ПраваяЧасть, СтрДлина(ПраваяЧасть) - Поз - 7);
                Поз = Найти(ПраваяЧасть, """");
                Если Поз > 0 Тогда
                    ДанныеКартинкиСтрокой = Лев(ПраваяЧасть, Поз - 1);
                    ДвоичныеДанныеКартинки = Base64Значение(ДанныеКартинкиСтрокой);
                    Если Расширение = "bmp" Тогда
                        Картинка = Новый Картинка(ДвоичныеДанныеКартинки);
                        КартинкаPNG = Картинка.Преобразовать(ФорматКартинки.PNG);
                        ПотокКартинки = Новый ПотокВПамяти;
                        КартинкаPNG.Записать(ПотокКартинки);
                        ДвоичныеДанныеКартинки = ПотокКартинки.ЗакрытьИПолучитьДвоичныеДанные();
                    КонецЕсли;

//Куда-то это ДвоичныеДанныеКартинки отправляются

                КонецЕсли;
            КонецЕсли;
            ПраваяЧасть = Прав(ПолеВводаКомментария.innerHTML, СтрДлина(ПолеВводаКомментария.innerHTML) - ПозНачало + 1);
            Поз = Найти(ПраваяЧасть, ">");
            Если Поз > 0 Тогда
                ПолеВводаКомментария.innerHTML = Лев(ПолеВводаКомментария.innerHTML, ПозНачало - 1) + Прав(ПраваяЧасть, СтрДлина(ПраваяЧасть) - Поз);
            КонецЕсли; 
        КонецЕсли;
    КонецЕсли;


Код поля HTML для получения картинки в web-клиенте:

                        <html>
                        <head></head>
                        <body />                         <meta http-equiv='X-UA-Compatible' content='IE=edge'>
                        <script>
                        function drop(ev) {
                          ev.preventDefault();
                          document.getElementById(""DropData"").innerHTML=ev.dataTransfer.getData(""Text"");
                          document.getElementById(""DropData"").click();
                          document.getElementById(""DropData"").innerHTML="""";
                        }
                        function retrieveImageFromClipboardAsBase64(pasteEvent, callback, imageFormat){
                            if(pasteEvent.clipboardData == false){
                                if(typeof(callback) == ""function""){
                                    callback(undefined);
                                }
                            };
                            var items = pasteEvent.clipboardData.items;
                            if(items == undefined){
                                if(typeof(callback) == ""function""){
                                    callback(undefined);
                                }
                            };
                            for (var i = 0; i < items.length; i++) {
                                if (items[i].type.indexOf(""image"") == -1) continue;
                                var blob = items[i].getAsFile();
                                var mycanvas = document.createElement(""canvas"");
                                var ctx = mycanvas.getContext('2d');
                                var img = new Image();
                                img.onload = function(){
                                    mycanvas.width = this.width;
                                    mycanvas.height = this.height;
                                    ctx.drawImage(img, 0, 0);
                                    if(typeof(callback) == ""function""){
                                        callback(mycanvas.toDataURL(
                                            (imageFormat || ""image/png"")
                                        ));
                                    }
                                };
                                var URLObj = window.URL || window.webkitURL;
                                img.src = URLObj.createObjectURL(blob);
                            }
                        }
                        function  bindHandler()
                        {
                            window.addEventListener(""paste"", function(e){
                                retrieveImageFromClipboardAsBase64(e, function(imageDataBase64){
                                    if(imageDataBase64){
                                        document.getElementById(""imgData"").innerHTML=imageDataBase64;
                                        document.getElementById(""imgData"").click();
                                        document.getElementById(""imgData"").innerHTML="""";
                                    }
                                    else{
                                        document.getElementById(""imgData"").innerHTML=""paste_event"";
                                        document.getElementById(""imgData"").click();
                                        document.getElementById(""imgData"").innerHTML="""";
                                    }
                                });
                            }, false);
                        }
                        </script>
                        </head>
                        <div id=""comment"" class=""stylecomment"" contenteditable=""true"" display: inline-block></div>
                        <div id=""DropData"" style=""display:none""></div>
                        <div id=""imgData"" style=""display:none"" contenteditable=""true""></div>
                        </body>
                        </html>


В файле для скачивания конфигурация с внешней компонентой и реализацией методами внешней компоненты и JS в вэб-клиенте.

Вставка картинки из буфера обмена

См. также

Разработка внешних компонент POS терминал Рабочее место Розничная торговля Программист Пользователь Платформа 1С v8.3 1С:Комплексная автоматизация 1.х 1С:Управление торговлей 10 1С:Розница 2 1С:Управление нашей фирмой 1.6 1С:ERP Управление предприятием 2 1С:Бухгалтерия 3.0 1С:Управление торговлей 11 1С:Комплексная автоматизация 2.х Розничная и сетевая торговля (FMCG) Рестораны, кафе и фаст-фуд Реклама, PR и маркетинг Управленческий учет Платные (руб)

Медиадисплей покупателя может отображать текущую покупку на кассовом месте, показывать видеорекламу, баннеры, во время простоя разворачивать рекламу на весь экран. Экран можно использовать в качестве графического меню-борда в кафе и видеовывески. В качестве устройства отображения можно использовать Android-планшеты, смарт-телевизоры с Android, мониторы или проекторы под управлением Windows или Linux-компьютера. Linux-версия успешно запускается на одноплатных компьютерах Raspberri Pi и Orange Pi. Настраивается ЛЮБОЙ ДИЗАЙН экрана при помощи встроенного графического редактора! Решение можно масштабировать от одного экрана до тысяч экранов с централизованным управлением.

18000 руб.

30.05.2017    53810    9    69    

46

Разработка внешних компонент Телефония, SIP Программист Платформа 1С v8.3 Конфигурации 1cv8 Россия Платные (руб)

Внешняя компонента выполнена по технологии Native API для 1С 8.х, обеспечивает доступ к программным АТС Asterisk (FreePBX, Elastix) через AMI интерфейс. Через него можно управлять многими функциями Asterisk (определение номеров, перевод звонков, набор телефона и т. д.)

2400 руб.

04.05.2018    46960    123    66    

66

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

Внешняя компонента позволяет работать c TWAIN-совместимым оборудованием (сканерами, камерами) . Полностью совместима со стандартной TWAIN-компонентой из БСП и может применяться как ее замена без изменения вызовов, при этом может работать с 64-разрядной платформой, а так же имеет расширенную функциональность, например, сохранение результата непосредственно в PDF без использования сторонних утилит. Прекрасно работает на сервере, тонком клиенте и веб-клиенте (проверена работа в браузерах Google Chrome, Mozilla Firefox и Microsoft Internet Explorer).

3000 руб.

12.05.2020    28386    138    100    

90

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

Внешняя компонента для конвертации PDF файлов в картинки без использования дополнительных программ. Работает на сервере и в тонком клиенте.

2400 руб.

25.06.2024    958    2    3    

2

Разработка внешних компонент Программист Платформа 1С v8.3 Платформа 1C v8.2 Платные (руб)

Внешняя компонента, позволяющая посылать команды и получать ответы по GraphQL протоколу из 1С.Может быть использована при интеграции. В 1С работает на стороне "клиента".

4600 руб.

27.06.2023    3467    2    0    

4

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

Внешняя компонента в виде библиотеки (.dll файл), позволяющая посылать команды и получать ответы по протоколу WebSocket из 1С. Компонента работает только на стороне "клиента".

4440 руб.

22.06.2020    18224    18    33    

22

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

Позволяет автоматизировать работу с картинками. С помощью компоненты можно измерять размер изображений, поворачивать их, наносить водяные знаки, конвертировать из одного формата в другой. Будет очень полезна для интернет-магазинов и всех, кому постоянно требуется работать с различными графическими форматами. Выполнена по технологии NativeAPI. Работает с форматами: jpg (jpeg), png, bmp, gif, tif

3600 руб.

02.09.2010    77351    72    257    

191

Разработка внешних компонент Программист Платформа 1С v8.3 Конфигурации 1cv8 Россия Бесплатно (free)

В статье описывается приложение-конструктор внешних компонент (native API). Конструктор упрощает процесс разработки за счет удобного добавления всех нужных функций и процедур в графическом режиме, с указанием их параметров и типов параметров. На выходе приложение генерирует готовый код на С++ и Rust и позволяет сразу приступить к реализации, без настройки API компоненты вручную.

04.12.2024    3612    kovalevdmv    26    

66
Комментарии
Подписаться на ответы Инфостарт бот Сортировка: Древо развёрнутое
Свернуть все
1. AneJIbcuH 40 05.12.19 17:55 Сейчас в теме
Оее! Для web-клиента очень как надо было!! Пощупаем.
2. diziburda1 25.06.20 15:57 Сейчас в теме
i can not download dt file can you help me ?
3. Andreyyy 75 25.06.20 17:32 Сейчас в теме
4. diziburda1 25.06.20 17:40 Сейчас в теме
I am new user and i have no startmoney in infostart so i didnt download it :)
5. Andreyyy 75 26.06.20 12:45 Сейчас в теме
6. diziburda1 26.06.20 13:08 Сейчас в теме
I am not russian i am not from russia so i dont know anything about infostart payment methods.I am new to developing 1c enterprise. I have same solution with yours but in 1c enterprise platform not working. When i use chrome firefox there isnt any problem but 1c enterprise webkit browser not works with my solution. I only want to learn what is my mistake ? why it isnt working
7. Andreyyy 75 26.06.20 13:27 Сейчас в теме
8. diziburda1 26.06.20 13:46 Сейчас в теме
9. akR00b 24 11.01.21 15:33 Сейчас в теме
Обновлено 10.02.2021: привет из будущего.
10. Andreyyy 75 11.01.21 16:00 Сейчас в теме
(9) Сделано надежно, в будущем тоже будет работать !
Оставьте свое сообщение