強制粘貼事件在Base64編碼，圖像

Question

背景：

我發展我公司的HTML5網頁應用，它基本上是在數據庫中存儲信息的富文本編輯器（類似於谷歌文檔）。

我們使用CKEditor 3作爲richtext編輯器和jquery來實現這一點。

我們選擇Google的Chrome作爲首選瀏覽器。

我們的應用程序目前處於alpha測試階段，擁有一組18位測試人員（與使用該應用程序的測試人員相同）。這些人是異構的，但他們幾乎所有人都具備基本的計算機技能，主要限於MS Word和MS Excel。

。

問題：

我們的大多數用戶仍然使用這個詞來闡述文件，主要是由於其產生豐富的流程圖的能力。當他們將生成的內容複製/粘貼到Chrome時，圖像將粘貼爲本地文件的鏈接（由操作系統自動生成，位於用戶/ */temp文件夾中）。這意味着服務器無法訪問這些文件，並且生成的文檔（生成的PDF）不包含圖像。

。

問題

我如何可以強制用base64進行編碼粘貼圖片，類同在Firefox中會發生什麼？

。

注意

如果這是可能的「上傳」至服務器SRC =引用的圖片「文件：// C：\東西」，因爲我的base64後來編碼圖像，將解決我的問題。

我們無法切換到Firefox，因爲它沒有完全解決我們的問題（如果圖像與文本一起「粘貼」，firefox不會對其進行base64編碼）並引發其他問題，例如出現水平滾動條當文本太長以至於無法放入textarea時。

Answer 1

是的，不，我相信。

可以攔截粘貼事件並將粘貼的圖像作爲文件獲取，然後使用FileReader將文件讀取爲數據URI（基本64編碼的PNG）。

但是，Word似乎向本地文件發送引用，由於跨域請求（http://...和file:///...），該文件會生成安全性異常（至少在Chrome上）。就我而言，沒有辦法獲得這些本地文件的實際內容，並且其內容是而不是本身作爲剪貼板數據發送。

如果你複製一個「純」圖像（例如：Paint），你可以得到如下的base64編碼數據：http://jsfiddle.net/pimvdb/zTAuR/。或者在div：http://jsfiddle.net/pimvdb/zTAuR/2/中將圖像作爲基本64編碼PNG追加。

div.onpaste = function(e) { 
    var data = e.clipboardData.items[0].getAsFile(); 

    var fr = new FileReader; 

    fr.onloadend = function() { 
     alert(fr.result.substring(0, 100)); // fr.result is all data 
    }; 

    fr.readAsDataURL(data); 
};