Сразу оговорюсь, реализация не моя, публикую на правах заказчика и идейного вдохновителя (скромно так).
Позже будет выложена ссылка на гитхаб с исходниками внешней компоненты (как только разработчик выложит).
И так, для своей разработки Тикеты - система учета задач/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 в вэб-клиенте.
Вступайте в нашу телеграмм-группу Инфостарт
