让编辑器支持word复制黏贴、截屏的js代码
脚本之家 / 编程助手:解决程序员“几乎”所有问题!
脚本之家官方知识库 → 点击立即使用
chrome有很多人性化的API,比如拖拽, 比如图片可以转化为base64等;
比如知乎上面的回复中可以直接黏贴图片, 就不需要手动点击图片上传按钮, 选择图片, 确认上传等等; 知乎参考地址:打开
让编辑器支持word的复制黏贴, 其中图片会转化为base64编码, 如果是通过远程打开这个静态页, 黏贴word文档的时候, 图片不会黏贴进来, 因为远程地址无法访问本地磁盘的绝对路径, 如果把下面代码保存成静态界面打开, 那么word中的图片都可以看见, 而且都会被转化为base64编码;
编辑器支持截屏的黏贴;
让编辑器支持图片直接拖拽, 直接拖拽即可添加图片, 功能更加强大, 而且图片也是base64编码;
使用的话这new Edit(), 参数为一个可编辑的元素, 比如有contenteditable属性的div或者iframe元素等:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 | < html > < head ></ head > < body > < script src = "http://cdn.bootcss.com/jquery/1.9.0/jquery.js" ></ script > < div id = "edit" contenteditable = "true" style = "width:400px;height:400px;border:1px solid #f00" > </ div > < script > function Edit( editEl ) { editEl = $(editEl); $(editEl).bind("paste", clipFn); function clipFn(ev) { //把剪贴板中的img通过canvas中专为base64字符串; var canvas = document.createElement("canvas"); var context = canvas.getContext("2d"); //从word拷贝时候会得到text/html数据; var html = $(ev.originalEvent.clipboardData.getData("text/html")); html.find("img").each(function () { var img = document.createElement("img"); var src = $(this).attr("src"); //.replace(/\\/gi,"\/"); var _this = this; img.src = src; img.onload = function () { canvas.width = img.width; canvas.height = img.height; context.drawImage(img, 0, 0, img.width, img.height); var dataBase64 = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); $("img").each(function (index, el) { //匹配图片; if ($(this).attr("src").replace(/[\/\\]/g,"") === src.replace(/[\/\\]/g,"")) { el.src = dataBase64; }; }); img.onerror = function() { console.log("图片加载失败"); }; img.onload = null; }; }); //如果通过截图或者复制图片的方式会得到 type为"imgage"的图片; var ele = ev.originalEvent.clipboardData.items; for (var i = 0; i < ele.length ; ++i) { if ( ele[i].kind == 'file' && ele[i].type.indexOf('image/') !== -1 ) { var blob = ele [i].getAsFile(); readBlobAsDataURL(blob, function( base64 ) { var img = document .createElement('img'); img.setAttribute('src', base64); editEl.append(img);; }); //阻止默认事件, 避免重复添加; ev.originalEvent.preventDefault(); }; }; }; //绑定拖拽事件 //要给个响应 editEl.bind("dragover", function() { return false; }); //触发事件的响应 editEl.bind("drop", function(ev) { loadImage( ev.originalEvent.dataTransfer.files[0] , function( result ) { editEl.append( "<img src = "+result+" />" ); }); return false; }); // 加载 图像文件(url路径) function loadImage(src, callback){ // 过滤掉 非 image 类型的文件 if(!src.type.match(/image.*/)){ if(window.console){ console.log("选择的文件类型不是图片: ", src.type); } else { window.confirm("只能选择图片文件"); } return; } // 创建 FileReader 对象 并调用 render 函数来完成渲染. var reader = new FileReader(); // 绑定load事件自动回调函数 reader.onload = function(e){ // 调用前面的 render 函数 callback(e.target.result); }; // 读取文件内容 reader.readAsDataURL(src); }; function readBlobAsDataURL(blob, callback) { var a = new FileReader(); a.onload = function(e) {callback(e.target.result);}; a.readAsDataURL(blob); }; }; </ script > < script > new Edit("#edit"); </ script > </ body > </ html > |
很多网上的编辑器里 对图片的支持单一, 都会考虑IE6, IE7, ff, chrome, 各种兼容问题;
这个解决方案适合基于chrome内核的浏览器, FF的兼容没有处理, 因为所有的图片数据都是基于base64, 图片就没有上传这一说法了,图片都变成了字符串, 不过这个有个劣势就是每一次提交的数据都会比较大;
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
微信公众号搜索 “ 脚本之家 ” ,选择关注
程序猿的那些事、送书等活动等着你
最新评论