当前位置：网站首页>让Web页面中的编辑器支持黏贴或直接拖拽来添加图片「建议收藏」

让Web页面中的编辑器支持黏贴或直接拖拽来添加图片「建议收藏」

2022-08-04 13:09:00 【全栈程序员站长】

大家好，又见面了，我是你们的朋友全栈君。

基本原理是将剪贴板中的图片二进制数据转为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>

View Code

参考资料：

让编辑器支持word的复制黏贴,支持截屏的黏贴

发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/107088.html原文链接：https://javaforall.cn

原网站

版权声明
本文为[全栈程序员站长]所创，转载请带上原文链接，感谢
https://cloud.tencent.com/developer/article/2065730