В настоящее время только более высокая версия браузера Chrome поддерживает прямое вставка. Другие браузеры не могут вставить до сих пор. Тем не менее, изображение, сделанное Firefox, и браузеры IE11, могут вставлять скриншоты в редактируемых Divs, также является BASE64 BIT, а Chrome использует BubboardData. Тем не менее, в браузерах Firefox и IE11 невозможно напрямую получить данные Base64 изображений с использованием буферизации. Он поставляется с собственными прямыми данными IMG.
Полный пример:
<! Doctype html> <html lang = "en-us"> <head> <meta charset = "utf-8"> <title> Используйте буферизащики для реализации функций экрана и вставки на веб-страницах </title> <style type = "text/css"> .box {width: 500px; Высота: 300px; Граница: 1PX SOLID #DDD; } .box img {max-width: 480px; Макс-высот: 100%; Text-align: center;} </style> </head> <body> <div Coteededitable = "true" id = "testinput"> </div> <script type = "text/javascript"> (function () {var imgreader = function (item) {var blob = item.getasfile (), reader = new FileDeader ();) function = function = function = function = function = function = function = ravecle = functuredload. IMG.SRC = E.Target.Result; //window.clipboarddata.getData("text ") Получить вставленное содержание в e.clipboarddata.getData (" text/plain "). Console.log ('0') if (boopboard) 'Files') {item = items [i]; </script> </script> </body> </html>Пример 2:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <Title> документ </title> </head> <body> <div id = "div" Coteteditable = "true"> </div> <script> var div = document.getelementbyid ('div'); div.addeventlistener ('past', function (e) {if (e.clipboarddata) {for (var i = 0; i <e.clipboarddata.items.length; i ++) {var c = e.clipboarddata.items [i]; var f = c.getasfile (); var Reader = new Falereader (); div.innerhtml + = '<img src = "' + e.target.result + '">'; </script> </body> </html>Метод реализации:
Метод 1: В браузере Chrome вы можете напрямую получить данные изображения экрана через буферизал. Вы можете использовать Ajax для передачи данных на фон, а затем вернуть адрес изображения с доменным именем по фоновой разработке.
Метод 2: Поскольку данные изображения не могут быть получены непосредственно в браузерах, таких как Firefox, вы можете получить данные IMG в DIV в качестве данных URL Base64 при вставке, а затем использовать AJAX в качестве того же метода.
Метод 3: При нажатии на публикацию или сохранение сообщений вы можете получить данные IMG в DIV в качестве данных URL Base64, а затем использовать AJAX одновременно. Если есть несколько изображений, цикл или при нажатии на сохранение и публикацию, будет выполнено процесс разработки в конце концов, и возвращаемая информация о дисплее будет обработана напрямую. Таким образом, нам не нужно заменять URL Base64 на адрес с доменным именем, возвращаемым бэк-эндом в Div.
Метод 4: При вставке в DIV всплывает всплывающий слой, а затем предварительный просмотр картинки со скриншотами во всплывающем слое может подтвердить кнопку загрузки. Нажмите кнопку «Загрузить», чтобы перейти в Ajax, чтобы загрузить изображение так же, как и тот же метод