图片的复制无非有两种方法, 一种是图片直接上传到服务器, 另外一种转换成二进制流的 base64 码
目前限 Chrome 浏览器使用
首先以 um-editor 的二进制流保存为例:
打开 umeditor.JS, 找到 UM.plugins['autoupload'], 然后找到 autoUploadHandler 方法, 注释掉其中的代码.
加入下面的代码:
- // 判断剪贴板的内容是否包含文本
- // 首先解释一下为什么要判断文本是不是为空
- // 在 ctrl+c Word 中的文字或者图片之后会返回 1 种 (image/PNG) 或者 4 种 type(text/plain,text/html,text/rtf,image/PNG)类型的对象
- // 为了兼容 4 种格式的情况, 做了如下的判断
- // 如下代码: e.originalEvent.clipboardData.items 获得剪贴板的内容
- // 当粘贴了文本之后 text 是不为空的, 同时也会返回当前文本的图片类型
- // 如果有文字的话不做任何的处理, 如果只粘贴图片的话文本一定是空的, 包括复制的桌面图片或者截图的图片
- var text = e.originalEvent.clipboardData.getData("text");
- if(text == ""){
- var items=e.originalEvent.clipboardData.items;
- for (var i = 0, len = items.length; i < len; i++) {
- var item = items[i];
- if ( item.kind == 'file' && item.type.indexOf('image/') !== -1 ) {
- var blob = item.getAsFile();
- getBase64(blob, function( base64 ) {
- //sendAndInsertImage(base64,me); 上传到服务器
- setBase64Image(base64,me);
- });
- // 阻止默认事件, 避免重复添加;
- e.originalEvent.preventDefault();
- };
- }
- }
两个方法:
- // 执行插入图片的操作
- function setBase64Image(base64,editor){
- editor.execCommand('insertimage', {
- src: base64,_src: base64
- });
- }
- // 获得 base64
- function getBase64(blob, callback) {
- var a = new FileReader();
- a.onload = function(e) {
- callback(e.target.result);
- };
- a.readAsDataURL(blob);
- };
效果展示:
详细内容可参考这篇文章:
讨论群: 223813913
来源: http://www.bubuko.com/infodetail-3596938.html