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,"http://"); 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， 圖片就沒有上傳這一說法了，圖片都變成了字符串， 不過這個有個劣勢就是每一次提交的數據都會比較大；
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
