前端文件相关数据转化

前端文件相关数据转化

前端的文件操作涉及到的集中数据类型的相互转化总结
File, Blob, base64, URL的相互转化

File => Blob

File本身就是继承了Blob, 而Blob.prototype.slice()返回一个Blob对象, 所以可以使用File实例调用slice函数, 从而得到一个Blob对象

var blob = file.slice();

File => base64

var reader = new FileReader();
reader.onload = event => {
  var base64 = event.target.result;
}
reader.readAsDataURL(file);

File => URL

var url = URL.createObjectURL(file);

base64 => File

要把base64转化为其他类型的数据, 首先要借助window.atob函数对base64进行解析, 然后构造一个Uint8Array, 再使用new File(...)实例化一个File对象

var binary = window.atob(base64.split(',')[1]);
var arr = [];
for(var i=0; i < binary.length; i++) {
  arr.push(binary.charCodeAt(i));
}
var unit8Array = new Unit8Array(arr);
var file = new File([unit8Array], 'fileName'); // fileName为必须字段, 指定file的name属性

base64 => Blob

转Blob与转File是一样的, 只是最后使用new Blob(...)而不是new File(...)

var binary = window.atob(base64.split(',')[1]);
var arr = [];
for(var i=0; i < binary.length; i++) {
  arr.push(binary.charCodeAt(i));
}
var unit8Array = new Unit8Array(arr);
var blob = new Blob([unit8Array]);

base64 => URL

base64无法直接转化为URL, 不过可以借助上面的方式, 先把base64转File或Blob, 再把File或Blob转为URL(base64 => File/Blob => URL)

Blob => File

File构造函数可以接受一个Blob数组, 所以Blob转File实际上只要new File(...)就可以了

var file = new File([blob], 'fileName');

Blob => base64

Blob转base64其实和File转base64是一样的, 同样借助FileReader

var reader = new FileReader();
reader.onload = event => {
  var base64 = event.target.result;
}
reader.readAsDataURL(blob);

Blob => URL

URL.createObjectURL函数可以接受一个File或Blob类型参数, 所以直接使用这个函数就可以把Blob转为一个URL

var url = URL.createObjectURL(blob);

关于FileReader和URL对象可以参考FileReader, URL

补充: 使用canvas对已知的图片URL进行处理

使用canvas可以将已知地址的图片读取成blob数据

// 获取一个可用的图片地址, 并生成一个Image对象(或img元素)
var imgUrl = "./img.png";
var image = new Image();
// 获取页面中的canvas元素
var canvas = document.getElementById('canvas');
var ctx = canvas.getContext('2d');
image.onload = function() {
  canvas.width = image.width;
  canvas.height = image.height;
  ctx.drawImage(image, 0, 0);
  canvas.toBlob(function(blob) {
   console.log(blob); 
  });
}
image.src = imgUrl;