让Web页面中的编辑器支持黏贴或直接拖拽来添加图片「建议收藏」
让Web页面中的编辑器支持黏贴或直接拖拽来添加图片「建议收藏」
全栈程序员站长
发布于 2022-08-04 12:32:28
发布于 2022-08-04 12:32:28
文章被收录于专栏：全栈程序员必看
大家好，又见面了，我是你们的朋友全栈君。
基本原理是将剪贴板中的图片二进制数据转为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
参考资料：
发布者：全栈程序员栈长，转载请注明出处：https://javaforall.cn/107088.html原文链接：https://javaforall.cn
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022年4月2，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
腾讯云开发者
