在開發(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)換怎爵，
