在開發(fā)輸入編輯器時(shí)，往往會(huì)用到本地圖片，或者截屏粘貼到編輯器中的情況。
這個(gè)思路是，將圖片轉(zhuǎn)化為URL格式的字符串，來表示文件內(nèi)容，通過設(shè)置src屬性，進(jìn)而顯示出完整圖片。

我的啟蒙文章將截圖實(shí)時(shí)顯示在瀏覽器中，我通過這篇啟蒙文章親自敲打了一遍，發(fā)現(xiàn)確實(shí)功能強(qiáng)大。但是遺憾的是，只有在Chrome中才起作用，使得我不得不去學(xué)習(xí)clipboardData對(duì)象以及FileReader對(duì)象。

FileReader

使用FileReader對(duì)象,web應(yīng)用程序可以異步的讀取存儲(chǔ)在用戶計(jì)算機(jī)上的文件(或者原始數(shù)據(jù)緩沖)內(nèi)容,可以使用File
對(duì)象或者Blob
對(duì)象來指定所要處理的文件或數(shù)據(jù).其中File對(duì)象可以是來自用戶在一個(gè)input元素上選擇文件后返回的FileList
對(duì)象,也可以來自拖放操作生成的 DataTransfer
對(duì)象,還可以是來自在一個(gè)HTMLCanvasElement
上執(zhí)行mozGetAsFile()方法后的返回結(jié)果

var eventData = {
    type: 'auto',
    method: 'paste',
    dataTransfer: clipboard.initPasteDataTransfer( evt )
};

~~~

var imgFile = eventData.dataTransfer.getFile(0);

~~~

if(imgFile && imgFile.type == 'image/png'){
  var reader = new FileReader();
  reader.readAsDataURL( imgFile );
}
setTimeout( function() {
    if(imgFile && imgFile.type == 'image/png'){
        eventData.binaryFlow = reader.result;
    }
    firePasteEvents( editor, eventData);
}, 0 );             

//將二進(jìn)制流賦給src
imgElement.setAttribute('src',e.data.binaryFlow);

若要存儲(chǔ)，利用后臺(tái)語句進(jìn)行轉(zhuǎn)換，