?
圖片的復制無非有兩種方法,一種是圖片直接上傳到服務器,另外一種轉換成二進制流的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();
?????????????};
????????}
}
兩個方法:
//執(zhí)行插入圖片的操作
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
?
?
本文摘自 :https://www.cnblogs.com/