在开发输入编辑器时,往往会用到本地图片,或者截屏粘贴到编辑器中的情况。
这个思路是,将图片转化为URL格式的字符串,来表示文件内容,通过设置src属性,进而显示出完整图片。
我的启蒙文章将截图实时显示在浏览器中,我通过这篇启蒙文章亲自敲打了一遍,发现确实功能强大。但是遗憾的是,只有在Chrome中才起作用,使得我不得不去学习clipboardData对象以及FileReader对象。
FileReader
使用FileReader对象,web应用程序可以异步的读取存储在用户计算机上的文件(或者原始数据缓冲)内容,可以使用File
对象或者Blob
对象来指定所要处理的文件或数据.其中File对象可以是来自用户在一个input元素上选择文件后返回的FileList
对象,也可以来自拖放操作生成的 DataTransfer
对象,还可以是来自在一个HTMLCanvasElement
上执行mozGetAsFile()方法后的返回结果
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 );
//将二进制流赋给src
imgElement.setAttribute('src',e.data.binaryFlow);
若要存储,利用后台语句进行转换,