html 截图粘粘图片JS
Posted laushow
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 截图粘粘图片JS相关的知识，希望对你有一定的参考价值。
web前端socket聊天室功能和在线编辑器上传编辑内容的时候经常会需要上传一些图文信息，但是很多编辑器不支持截图粘粘的功能，这里参考了网友分享的可用方法做一个记录。
1 <html> 2 <head> 3 <title>截图粘粘</title> 4 <style type=‘text/css‘> 5 #editable { 6 width: 600px; 7 height: 400px; 8 border: 1px dashed red; 9 } 10 </style> 11 <script type="text/javascript"> 12 window.onload = function () { 13 function paste_img(e) { 14 if (e.clipboardData.items) { 15 var ele = e.clipboardData.items 16 for (var i = 0; i < ele.length; ++i) { 17 if (ele[i].kind == ‘file‘ && ele[i].type.indexOf(‘image/‘) !== -1) { 18 var blob = ele[i].getAsFile(); 19 window.URL = window.URL || window.webkitURL; 20 var blobUrl = window.URL.createObjectURL(blob); 21 var new_img = document.createElement(‘img‘); 22 convertImgToBase64(blobUrl, function(base64Img){ 23 new_img.setAttribute(‘src‘, base64Img); 24 document.getElementById(‘editable‘).appendChild(new_img); 25 }); 26 } 27 } 28 } else { 29 alert(‘您的浏览器不支持粘贴图片功能,请换更高版本浏览器.‘); 30 } 31 } 32 document.getElementById(‘editable‘).onpaste = function () { 33 paste_img(event); 34 return false; 35 }; 36 } 37 function convertImgToBase64(url, callback, outputFormat){ 38 var canvas = document.createElement(‘CANVAS‘), 39 ctx = canvas.getContext(‘2d‘), 40 img = new Image; 41 img.crossOrigin = ‘Anonymous‘; 42 img.onload = function(){ 43 canvas.height = img.height; 44 canvas.width = img.width; 45 ctx.drawImage(img,0,0); 46 var dataURL = canvas.toDataURL(outputFormat || ‘image/png‘); 47 callback.call(this, dataURL); 48 canvas = null; 49 }; 50 img.src = url; 51 } 52 53 //方法2 图片转base64 body监听粘贴 54 $(‘body‘).on(‘paste‘, function(e){ 55 alert(‘1212‘); 56 var clipboard = e.clipboardData; 57 var type = clipboard.items[0].type; 58 alert(‘-=-=-‘); 59 if (type.match(/image/)) { 60 var blob = clipboard.items[0].getAsFile(); 61 var file = new FileReader(); 62 file.on(‘loadend‘, function(e){ 63 alert(e.target.result); 64 console.log(‘image‘,e.target.result); 65 }); 66 file.readAsDataURL(blob); 67 } else { 68 alert(type); 69 console.log(‘not an image‘,type); 70 } 71 }); 72 </script> 73 </head> 74 <body> 75 <div id="editable" contenteditable="true"> 76 </div> 77 </body> 78 </html>
以上是关于html 截图粘粘图片JS的主要内容，如果未能解决你的问题，请参考以下文章