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.items16 ????????????????????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
原文地址：https://www.cnblogs.com/laushow/p/9070695.html