你的位置:首页 > Java教程

[Java教程]让编辑器支持word的复制黏贴,支持截屏的黏贴


   chrome有很多人性化的API,比如拖拽, 比如图片可以转化为base64等;

   比如知乎上面的回复中可以直接黏贴图片,  就不需要手动点击图片上传按钮, 选择图片, 确认上传等等; 知乎参考地址:打开

 

   让编辑器支持word的复制黏贴, 其中图片会转化为base64编码, 如果是通过远程打开这个静态页, 黏贴word文档的时候, 图片不会黏贴进来, 因为远程地址无法访问本地磁盘的绝对路径, 如果把下面代码保存成静态界面打开, 那么word中的图片都可以看见, 而且都会被转化为base64编码;

   编辑器支持截屏的黏贴

   让编辑器支持图片直接拖拽, 直接拖拽即可添加图片, 功能更加强大, 而且图片也是base64编码;

 

  使用的话这new Edit(), 参数为一个可编辑的元素, 比如有contenteditable属性的div或者iframe元素等:

<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, 图片就没有上传这一说法了,图片都变成了字符串, 不过这个有个劣势就是每一次提交的数据都会比较大;

 

DataURL与File,Blob,canvas对象之间的互相转换的Javascript

通过Canvas及File API缩放并上传图片