让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>