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

关于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  >  DataURL
var dataurl = canvas.toDataURL();//可选参数type，定义dataurl中的数据类型，默认为'image/png';

//DataURL >  canvas
//先要把DataURL写入一个Image对象中，然后用canvas来绘制
var img = new Image();//创建Image对象
var canvas1 = document.createElement('canvas');//创建canvas
var 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
//假定现在有一个canvas
var 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);