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

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

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

И так, для своей разработки Тикеты — система учета задач в 1С необходимо было реализовать вставку картинки из буфера.
Задача была получать картинку по нажатию Ctrl+V в поле HTML.

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

Код поля 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>

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

1 Comment

  1. AneJIbcuH

    Оее! Для web-клиента очень как надо было!! Пощупаем.

    Reply

Leave a Comment

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