Atualmente, apenas a versão superior do navegador Chrome suporta a colagem direta. Outros navegadores não podem colar até agora. No entanto, a imagem tirada pelos navegadores Firefox e IE11 pode colar capturas de tela em divs editáveis também é base64 bit e o Chrome usa o ClipboardData. No entanto, nos navegadores Firefox e IE11, não é possível obter diretamente dados Base64 de imagens usando o CLIPBOODDATA. Ele vem com seus próprios dados diretos do IMG.
Exemplo completo:
<! Doctype html> <html lang = "en-us"> <head> <meta charset = "utf-8"> <title> use o clipboarddata para implementar funções de captura de tela e colar em páginas da web </title> <style type = "text/cs"> box {width: 500px; Altura: 300px; Fronteira: 1px sólido #DDD; } .Box img {max-width: 480px; MAX-HEUTH: 100%; Texto-align: Center;} </style> </ad Head> <body> <div contentedabable = "true" id = "testInput"> </div> <script type = "text/javascript"> (function () {var iMgreader = function (item) {var Blob = item.getasFile (), leiter = novo FilerEradeReradeRerader (); img.src = e.Target.Result; //window.clipboardData.getData("Text") Get pasted content under e.clipboardData.getData("text/plain") Firefox Get pasted content under Google //alert(e.clipboardData.getData("text/plain") ) var clipboardData = e.clipboardData,//Google i = 0, items, item, types; Console.Log ('0') if (CLIPBOODDATA) {Console.log ('1') itens = CLIPBOODDATA.Items; === 'arquivos') {item = itens [i]; </script> </script> </body> </html>Exemplo 2:
<! Doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> document </ititle> </ad Head> <body> <div id = "div" contentedabable = "true"> </div> <cript> var = document.getElementByid ('div'; div.adDeventListener ('pasta', 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 (); div.innerhtml + = '<img src = "' + e.target.result + '">'; </script> </body> </html>Método de implementação:
Método 1: No navegador Chrome, você pode obter diretamente os dados da imagem da captura de tela através do CLIPboardData. Você pode usar o AJAX para passar os dados para o plano de fundo e, em seguida, retornar o endereço da imagem com o nome de domínio pelo desenvolvimento de fundo.
Método 2: Como os dados da imagem não podem ser obtidos diretamente em navegadores como o Firefox, você pode obter os dados IMG na div como os dados da URL base64 ao colar e depois usar o AJAX como o mesmo método.
Método 3: Ao clicar em publicar ou salvar mensagens, você pode obter os dados do IMG no DIV como dados da URL base64 e depois usar o Ajax ao mesmo tempo. Se houver várias imagens, loop ou ao clicar em salvar e publicar, o processo de desenvolvimento de back-end será feito e as informações de exibição retornadas serão processadas diretamente. Dessa forma, não precisamos substituir o URL base64 pelo endereço pelo nome de domínio retornado pelo back-end na div.
Método 4: Ao colar na div, uma camada pop-up aparece e, em seguida, uma visualização da imagem com capturas de tela na camada pop-up pode confirmar o botão de upload. Clique no botão de upload para ir ao Ajax para fazer o upload da imagem da mesma maneira que o mesmo método