让Web页面中的编辑器支持黏贴或直接拖拽来添加图片
基本原理是将剪贴板中的图片二进制数据转为Base64编码
代码：
1 <html> 2 <head> 3 </head> 4 <body> 5 <script src="http://cdn.bootcss.com/jquery/1.9.0/jquery.js"> 6 </script> 7 8 <div id="edit" contenteditable="true" style="width:400px;height:400px;border:1px solid #f00"> 9 10 </div> 11 12 <script> 13 function Edit( editEl ) { 14 editEl = $(editEl); 15 16 $(editEl).bind("paste", clipFn); 17 18 function clipFn(ev) { 19 20 //把剪贴板中的img通过canvas中专为base64字符串; 21 var canvas = document.createElement("canvas"); 22 var context = canvas.getContext("2d"); 23 24 //从word拷贝时候会得到text/html数据; 25 var html = $(ev.originalEvent.clipboardData.getData("text/html")); 26 html.find("img").each(function () { 27 28 var img = document.createElement("img"); 29 var src = $(this).attr("src"); 30 //.replace(/\\/gi,"\/"); 31 var _this = this; 32 img.src = src; 33 34 img.onload = function () { 35 canvas.width = img.width; 36 canvas.height = img.height; 37 context.drawImage(img, 0, 0, img.width, img.height); 38 var dataBase64 = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); 39 $("img").each(function (index, el) { 40 //匹配图片; 41 if ($(this).attr("src").replace(/[\/\\]/g,"") === src.replace(/[\/\\]/g,"")) { 42 el.src = dataBase64; 43 } 44 ; 45 } 46 ); 47 48 img.onerror = function() { 49 console.log("图片加载失败"); 50 } 51 ; 52 53 img.onload = null; 54 } 55 ; 56 57 } 58 ); 59 60 //如果通过截图或者复制图片的方式会得到 type为"imgage"的图片; 61 var ele = ev.originalEvent.clipboardData.items; 62 for (var i = 0; i < ele.length; ++i) { 63 if ( ele[i].kind == 'file' && ele[i].type.indexOf('image/') !== -1 ) { 64 65 var blob = ele[i].getAsFile(); 66 readBlobAsDataURL(blob, function( base64 ) { 67 68 var img= document.createElement('img'); 69 img.setAttribute('src', base64); 70 71 editEl.append(img); 72 ; 73 } 74 ); 75 //阻止默认事件, 避免重复添加; 76 ev.originalEvent.preventDefault(); 77 } 78 ; 79 } 80 ; 81 } 82 ; 83 84 //绑定拖拽事件 85 //要给个响应 86 editEl.bind("dragover", function() { 87 return false; 88 } 89 ); 90 91 //触发事件的响应 92 editEl.bind("drop", function(ev) { 93 loadImage( ev.originalEvent.dataTransfer.files[0] , function( result ) { 94 editEl.append( "<img src="+result+" />" ); 95 } 96 ); 97 return false; 98 } 99 ); 100 101 // 加载 图像文件(url路径) 102 function loadImage(src, callback){ 103 // 过滤掉 非 image 类型的文件 104 if(!src.type.match(/image.*/)){ 105 if(window.console){ 106 console.log("选择的文件类型不是图片: ", src.type); 107 } 108 else { 109 window.confirm("只能选择图片文件"); 110 } 111 return; 112 } 113 114 // 创建 FileReader 对象 并调用 render 函数来完成渲染. 115 var reader = new FileReader(); 116 // 绑定load事件自动回调函数 117 reader.onload = function(e){ 118 // 调用前面的 render 函数 119 callback(e.target.result); 120 } 121 ; 122 // 读取文件内容 123 reader.readAsDataURL(src); 124 } 125 ; 126 127 function readBlobAsDataURL(blob, callback) { 128 var a = new FileReader(); 129 a.onload = function(e) { 130 callback(e.target.result); 131 }; 132 a.readAsDataURL(blob); 133 } 134 ; 135 } 136 ; 137 </script> 138 139 <script> 140 new Edit("#edit"); 141 </script> 142 </body> 143 </html>
参考资料：
