xheditor從剪貼板粘貼圖片的實(shí)現原理2011-11-30 10:08:00

xheditor是一個(gè)優(yōu)秀的國產(chǎn)富文本編輯器，最近的（其實(shí)我也不知道有多久了）版本推出了一個(gè)粘貼剪貼板圖片的功能，很是喜愛(ài)，好奇了好久，最終不住去看了下源碼，基本明白了。

首先，這個(gè)功能很新，不支持IE系列瀏覽器……用的是一些新的API。我手上的代碼是1.1.10，所以代碼行數以這個(gè)版本為準。

一點(diǎn)前置小知識是必備的，那就是對大部分截圖軟件來(lái)說(shuō)，截圖操作是一個(gè)把截取的圖片轉換成指定格式（windows自帶的是bmp）然后放入剪貼板的過(guò)程。所以，要粘貼圖片，核心就是讀取剪貼板。

一、讀取剪貼板的時(shí)機

近幾年瀏覽器在拼標準、拼性能的時(shí)候，其實(shí)也在暗里拼安全，為了防止某個(gè)網(wǎng)頁(yè)一打開(kāi)就自動(dòng)把你剪貼板的內容傳網(wǎng)上去（IE6可以做到），現代瀏覽器不允許隨時(shí)讀寫(xiě)剪貼板。

瀏覽器為我們提供了onpaste事件（粘貼），讀取剪貼板數據僅能在該事件發(fā)生時(shí)在事件處理程序中進(jìn)行。因這里理解就好，所以就不貼代碼。

二、圖片數據

之所以IE不能粘貼圖片，就在于IE沒(méi)有處理二進(jìn)制文件的機制，它只能處理文本。

在現代瀏覽器中，則有關(guān)于文件的API，這里用到的就是File Reader，主要用來(lái)處理二進(jìn)制文件數據。

首先，在xheditor的第1922行，有一個(gè)cleanPaste()函數，它的作用就是讀取剪貼板的數據，然后放入編輯器中，具體見(jiàn)代碼注釋。

var clipboardData,items,item;//for chrome//ev是事件，其實(shí)大家都喜歡用e或者evt或者event//這句主要是確定剪貼板中是否有圖片if(ev&&    (clipboardData=ev.originalEvent.clipboardData)&&    (items=clipboardData.items)&&    (item=items[0])&&item.kind=='file'&&item.type.match(/^image\//i)){    var blob = item.getAsFile(),    //blob就是剪貼板中的二進(jìn)制圖片數據        reader = new FileReader();    //定義fileReader讀取完數據后的回調    reader.onload=function(){        var sHtml='<img src="'+event.target.result+'">';    //result是base64編碼后的圖片        //這里執行了一個(gè)將base64上報到服務(wù)器，然后將圖片url從base64編碼的圖片數據換成上傳后的圖片地址        sHtml=replaceRemoteImg(sHtml);        _this.pasteHTML(sHtml);//這里應該是關(guān)于光標和插入代碼的具體操作    }    reader.readAsDataURL(blob); //用fileReader讀取二進(jìn)制圖片，完成后會(huì )調用上面定義的回調函數    return false;}

好吧，本來(lái)還想寫(xiě)下中間上報到服務(wù)器的代碼的，想了想覺(jué)得也沒(méi)什么很特別的地方。最多是把base64數據當成普通URL上報，然后服務(wù)端再解碼成圖片。

嗯。就這樣，當筆記了。