Actualmente, solo la versión más alta de Chrome Browser admite el pastoreo directo. Otros navegadores no pueden pegar hasta ahora. Sin embargo, la imagen tomada por los navegadores Firefox e IE11 puede pegar capturas de pantalla en Divs editables también es Base64 Bit y Chrome usa Data de Papboard. Sin embargo, en los navegadores Firefox e IE11, no es posible obtener directamente los datos de Base64 de las imágenes usando PortboardData. Viene con sus propios datos IMG directos.
Ejemplo completo:
<! Doctype html> <html lang = "en-us"> <head> <meta charset = "utf-8"> <title> Use el complejodata para implementar la captura de pantalla y pegar funciones en páginas web </title> <style type = "text/css"> .box {width: 500px; Altura: 300px; borde: 1px sólido #ddd; } .Box img {max-width: 480px; Max-altura: 100%; Text-Align: Center;} </style> </head> <body> <diventeditable = "true" id = "testInput"> </iv> <script type = "text/javascript"> (function () {var im greader = function (item) {var blob = item.getAsfile (), lecter = new Fallereader (); lector.onload = function (eem) {var blob = item.getAsfile (), lector = new Fallereader (); lector.onload = function (e element) img.src = e.target.result; //window.clipboarddata.getData("text ") Obtenga contenido pegado en e.clipboarddata.getData (" text/sencillo ") Firefox obtenga contenido pegado en google //alert(e.clipboarddata.getData("text/plain") var de clipboard = e.clipboarddata, // google i = 0, item, tipos, tipos; PapboardData) {console.log ('1') elementos = Portapasco. }} if (item && item.kind === 'file' && item.type.match (/^image /// i)) {imgreader (item); </script> </script> </body> </html>Ejemplo 2:
<! DocType html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> document </title> </head> <body> <div id = "div" contenteditable = "true"> </div> <script> var = document.getgetElementByid ('div'); div.adDeventListener ('pegar', 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 lector = new FileReader (); Reader.onload = function (e); div.innerhtml + = '<img src = "' + e.target.result + '">'; </script> </body> </html>Método de implementación:
Método 1: En el navegador Chrome, puede obtener directamente los datos de la imagen de captura de pantalla a través de los datos del portapalaje. Puede usar AJAX para pasar los datos al fondo y luego devolver la dirección de imagen con el nombre de dominio por el desarrollo de fondo.
Método 2: Dado que los datos de la imagen no se pueden obtener directamente en navegadores como Firefox, puede obtener los datos IMG en el DIV como datos de URL Base64 al pegar, y luego usar AJAX como el mismo método.
Método 3: Al hacer clic en publicar o guardar mensajes, puede obtener los datos de IMG en el DIV como datos de URL Base64, y luego usar AJAX al mismo tiempo. Si hay múltiples imágenes, bucle o al hacer clic en Guardar y publicar, se realizará el proceso de desarrollo de back-end, y la información de visualización devuelta se procesará directamente. De esta manera, no necesitamos reemplazar la URL Base64 con la dirección con el nombre de dominio devuelto por el back-end en el DIV.
Método 4: Al pegar en el DIV, aparece una capa emergente, y luego una vista previa de la imagen con capturas de pantalla en la capa emergente puede confirmar el botón de carga. Haga clic en el botón Cargar para ir a AJAX para cargar la imagen de la misma manera que el mismo método