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

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

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

基本原理是将剪贴板中的图片二进制数据转为Base64编码

代码:

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

  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的复制黏贴,支持截屏的黏贴

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/107088.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • Python 词频统计

    Python 词频统计

  • 【Redis】集群

    【Redis】集群【Redis】集群

  • AJAX培训笔记_js基础笔记

    AJAX培训笔记_js基础笔记7.10——–Ajax:AsynchronousJavaScriptAndXML异步的JavaScript和XML1:编写ajax遵守基本标准习惯标签名全小写,标签必须有结束标签,属性名必须小写,属性值必须位于“”或”内2:创建ajax服务端代码:AjaxServer.java和普通的servlet类似,区别在于,普通servlet返回的是页面,而a

  • windows10 Linux子系统(wsl)文件目录

    windows10 Linux子系统(wsl)文件目录简介使用window中的Linux子系统创建的文件究竟放在什么地方,既然作为子系统文件肯定是可以互相访问的目录ubuntuLinux子系统的目录是在这个目录下C:\Users\用户名\AppData\Local\Packages\CanonicalGroupLimited.UbuntuonWindows_79rhkp1fndgsc\LocalState\rootfs现在在…

  • 基础数论略讲

    基础数论略讲

  • 一元线性回归-最小二乘法推导过程

    一元线性回归-最小二乘法推导过程设一元线性回归方程为,数据样本点为,要想使这n个样本点落在一元线性回归方程附近,不妨设误差为,使得没一个样本点落在一元线性回归方程上,因此有恒成立,所以回归直线应满足的条件是:实际值与回归估计值之间的误差平方和最小,即:此时令,原问题就转换成求解二元函数极小值问题,分别对求偏导:令上两式等于零,即最终求出两个数值,一元线性回归方程也就拟合出来了。…

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号