Вставка картинки из буфера обмена (на выбор: 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. Настраивается ЛЮБОЙ ДИЗАЙН экрана при помощи встроенного графического редактора! Решение можно масштабировать от одного экрана до тысяч экранов с централизованным управлением.

15000 руб.

30.05.2017    53438    8    69    

45

Разработка внешних компонент Программист Платформа 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    27854    137    100    

89

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

Внешняя компонента позволяет печатать PDF файлы непосредственно из 1С, не используя при этом сторонних программ. Прекрасно работает на сервере, тонком клиенте и веб-клиенте. Основана на проекте PDFium из состава проекта Chromium/Chrome

1500 руб.

17.09.2018    36277    113    127    

114

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

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

2400 руб.

04.05.2018    46503    120    66    

65

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

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

4600 руб.

27.06.2023    3249    2    0    

3

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

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

4440 руб.

22.06.2020    17914    17    33    

21

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

Как известно, стремление сделать свою рекламную продукцию запоминающейся и выделяющейся — верный путь к успеху. Сегодня, мы поговорим с вами о том, что можно сделать с обычным черно-белым QR-кодом, чтобы он стал более живым и привлекательным. Если вам не терпится попробовать сгенерировать QR-код с логотипом компании, то эта обработка для вас!

2400 руб.

22.06.2016    31297    5    4    

9
Комментарии
Подписаться на ответы Инфостарт бот Сортировка: Древо развёрнутое
Свернуть все
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) Сделано надежно, в будущем тоже будет работать !
Оставьте свое сообщение