关于DataURL Blob File FileReader createObjectURL canvas及其相互转化

标签（空格分隔）： js文件处理

---

关于DataURL Blob File FileReader createObjectURL canvas及其相互转化

DataURL

传统的img标签是通过引入服务器上的图片资源，浏览器对每个这样的img标签都会向服务器发送一个请求，一个页面中有过多的这种外部资源会导致页面的加载延迟。
而dataurl是把资源文件的内容转换成base64编码字符串，直接把编码放到src属性里就和一个引用外部资源一样使用了，这样dataurl可以用来优化网站加载速度，特别是html中有大量外部资源引用的时候

<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAABVCAYAAACrfR34AAANXklEQ…zeoA3eFaDbhy7ZoppkoWbcQusOKWBlNlndwHIspuo7WP8A9S1SD+cdaTAAAAAASUVORK5CYII=" />

这是上面图片的效果

DataURL的问题

• 资源文件转换成base64编码文件大小会变为原来的4/3
• Data URL形式的图片不会被浏览器缓存

CSS中使用DataURL（base64编码可以放在url内使用）

background-image:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJYAAABVCAYAAACrfR34AAANXklEQ…zeoA3eFaDbhy7ZoppkoWbcQusOKWBlNlndwHIspuo7WP8A9S1SD+cdaTAAAAAASUVORK5CYII=");

Blob

一个Blob对象就是一个包含有只读原始数据的类文件对象，包含的是二进制的数据，File就是基于Blob的接口

属性

属性名 描述 size blob对象中包含的数据大小 type blob对象中包含的数据的MIME类型（只读）

使用方法

//创建Blob对象var html = "<p>萌新瑟瑟发抖</p>";var htmlBlob = new Blob([html],'text/xml');//第一个参数是数据内容，必须写成数组的形式，第二个参数是数据的类型

Blob对象方法

slice()
用来获取Blob对象中指定范围内的数据，返回新的Blob对象

参数名 描述 start(可选) 指定要获取的部分的开始位置(默认为0) end(可选) 指定要获取的部分的结束位置(默认为最后) contentType(可选) 返回的Blob对象的数据类型(默认为空字符串)

File

File是基于Blob的接口，创建方法类似。

属性

属性名 描述 name File对象的名称(文件名) lastModified File对象最后一次修改时间 size File对象中包含的数据大小 type File对象中包含的数据的MIME类型（只读）

使用方法

//创建File对象var html = "<p>萌新瑟瑟发抖</p>";var htmlFile = new File([html],'text/xml');//第一个参数是数据内容，必须写成数组的形式，第二个参数是数据的类型

File对象可以从<input type='file' />获取

下面是html代码

<input type='file' id='file1' />

下面是js代码

var file1 = document.getElementById('file1').files[0];//这里的file1就是一个File对象

FileReader

FileReader 可以异步的读取计算机上的文件或者是浏览器的缓存，数据来源可以是<input type='file' />标签，也可以是html中的img标签等，或者是canvas的mozGetAsFile()方法返回的结果

创建方法

var fr = new FileReader();

readyState取值

状态名 值 描述 EMPTY 0 读取文件时发生错误(只读) LOADING 1 指的是读取文件完成或者被中止时的状态(只读) DONE 2 指示已经完成了文件的读取

属性

属性名 描述 error 读取文件时发生错误(只读) readyState 指的是读取文件完成或者被中止时的状态(只读) result FileReader对象读取文件完成后返回的，只有在读取完成后才有效，readAsArrayBuffer()、readAsDataURL()、readAsBinaryString()三个读取文件的方法都会返回result，但是数据类型不同(只读)

方法

abort()
立即结束读取操作，并返回相应数据，这时readyState值为DONE

readAsArrayBuffer()
开始读取指定的Blob或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个ArrayBuffer对象以表示所读取文件的内容

参数

参数名 描述 blob/file 一个Blob或File对象

var aBuf = fr.readAsArrayBuffer(file1);

readAsBinaryString()
开始读取指定的Blob或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件,就调用它.同时,result属性中将包含读取的文件的二进制数据

readAsDataURL()
开始读取指定的Blob或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件,就调用它.同时,result属性中将包含一个DataURL格式的字符串来表示所读取文件的内容

readAsText()
开始读取指定的Blob或File对象中的内容. 当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件,就调用它.同时,result属性中将包含一个字符串来表示所读取文件的内容
(后面这两种方法和readAsArrayBuffer的参数及使用方式都相同)

createObjectURL

这个方法是window.URL中的一个方法，可以返回一个DataURL字符串，浏览器支持也比较好，相应的有释放的方法revokeObjectURL

参数

参数名 描述 file/blob File或者Blob对象

使用方法

var dataUrl = window.URL.createObjectURL(file1);window.URL.createObjectURL(dataurl);

canvas之toDataURL和toBlob函数

这里并不是要详细讲解canvas(毕竟博大精深，萌新根本不懂2333)，只是简单介绍canvas 的 toDataURL和toBlob方法

toDataURL()

var img = new Image();img.src = dataUrl;var canvas = document.createElement('canvas');var ctx = canvas.getContext();ctx.drawImage(img,sx,sy,swidth,sheight,width,height);var dataUrl1 = canvas.toDataURL();//这里的dataUrl1就是这个canvas所绘制的这部分图像的数据

toBlob()

参数

参数名 描述 callback 回调函数做参数，当转换完成时就调用这个回调函数 type 指定的返回的Blob对象的type值，即MIME类型，默认为image/png

使用方法

var blob1;var blob = canvas.toBlob(function(blob){    blob1 = blob;},'image/png');//这里的blob1就是这个canvas所绘制的这部分图像的数据

相互转换

这里是总结一下Blob/File对象与DataURL、canvas之间的转换，也包括了FileReader和createObjectURL的使用

canvas与DataURL

//就用前面代码中创建的canvas来做演示//canvas  >  DataURLvar dataurl = canvas.toDataURL();//可选参数type，定义dataurl中的数据类型，默认为'image/png';//DataURL >  canvas//先要把DataURL写入一个Image对象中，然后用canvas来绘制var img = new Image();//创建Image对象var canvas1 = document.createElement('canvas');//创建canvasvar ctx = canvas1.getContext('2d');img.onload = function(){    ctx.drawImage(img,0,0);}//这个onload是在image对象加载数据完成后调用img.src = dataurl;

Blob/File 与 DataURL

//DataURL >  Blob/File//假定现在有一个dataurl,现在直接封装一个dataURLToBlob函数function dataURLToBlob(dataurl){    var arr = dataurl.split(',');    var mimeType = arr[0].match(/:(.*?);/)[1];    var mainData = arr[1];//这里的数据是一个base64编码的字符串，下面要进行解码才能传给Blob;    //这里要用到atob函数将base64编码数据解码(当然也有对应的btoa函数将数据编码成base64数据)    var originData = atob(mainData);    return new Blob([originData],mimeType);}//Blob/File  >  DataURL//这个转换需要FileReader的参与，假定现在有一个file/blob对象可用var dataurl;var fr = new FileReader();fr.onload = function(){    dataurl = fr.result;}fr.readAsDataURL(file/blob);

Blob/File 与 canvas

//canvas >  Blob/File//假定现在有一个canvasvar blob;canvas.toBlob(function(blob){    blob = blob;},'image/png');//Blob/File  >  canvas//这个转换需要FileReader的参与，假定现在有一个file/blob对象可用var dataurl;var img = new Image();var fr = new FileReader();fr.onload = function(){    dataurl = fr.result;    img.src = dataurl;}img.onload = function(){    ctx.drawImage(img,0,0);}fr.readAsDataURL(file/blob);