DataURL 与 File,Blob,canvas 对象之间的互相转换

let dataurl = canvas.toDataURL("image/png");
let dataurl2 = canvas.toDataURL("image/jpeg", 0.8);
复制代码

File 对象转换为 dataURL、Blob 对象转换为 dataURL

File 对象也是一个 Blob 对象，二者的处理相同。

function readBlobAsDataURL(blob, callback) {
  let a = new FileReader();
  a.onload = function(e) {
    callback(e.target.result);
  };
  a.readAsDataURL(blob);
}
复制代码

example:

readBlobAsDataURL(blob, function(dataurl) {
  console.log(dataurl);
});

readBlobAsDataURL(file, function(dataurl) {
  console.log(dataurl);
});
复制代码

dataURL 转换为 Blob 对象、dataURL 转换为 File 对象

File 继承于 Blob，扩展了一些属性（文件名、修改时间、路径等）。绝大多数场景下，使用 Blob 对象就可以了。

兼容性：Edge 浏览器不支持 File 对象构造函数，也就是 Edge 里不能 new File()。

dataURLtoBlob

function dataURLtoBlob(dataurl) {
  let arr = dataurl.split(",");
  let mime = arr[0].match(/:(.*?);/)[1];
  let bstr = atob(arr[1]);
  let n = bstr.length;
  let u8arr = new Uint8Array(n);

  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }

  return new Blob([u8arr], { type: mime });
}
复制代码

dataURLtoFile

function dataURLtoFile(dataurl, filename) {
  let arr = dataurl.split(",");
  let mime = arr[0].match(/:(.*?);/)[1];
  let bstr = atob(arr[1]);
  let n = bstr.length;
  let u8arr = new Uint8Array(n);

  while (n--) {
    u8arr[n] = bstr.charCodeAt(n);
  }

  return new File([u8arr], filename, { type: mime });
}
复制代码

test

let blob = dataURLtoBlob("data:text/plain;base64,YWFhYWFhYQ==");
let file = dataURLtoFile("data:text/plain;base64,YWFhYWFhYQ==", "test.txt");
复制代码

dataURL 图片数据绘制到 canvas

先构造 Image 对象，src 为 dataURL，图片 onload 之后绘制到 canvas

let img = new Image();
img.onload = function() {
  canvas.drawImage(img);
};
img.src = dataurl;
复制代码

File,Blob 的图片文件数据绘制到 canvas

还是先转换成一个 url，然后构造 Image 对象，src 为 dataURL，图片 onload 之后绘制到 canvas

利用上面的 readBlobAsDataURL 函数，由 File,Blob 对象得到 dataURL 格式的 url，再参考 dataURL 图片数据绘制到 canvas

readBlobAsDataURL(file, function(dataurl) {
  let img = new Image();
  img.onload = function() {
    canvas.drawImage(img);
  };
  img.src = dataurl;
});
复制代码

不同的方法用于构造不同类型的 url (分别是 dataURL, objectURL(blobURL), filesystemURL)。这里不一一介绍，仅以 dataURL 为例。

filesystemURL 不是指本地文件 URL 的形式(file:///….), 而是格式类似于 filesystem:http://... 的一种 URL，支持沙盒文件系统的浏览器支持(目前仅 Chrome)支持。

Canvas 转换为 Blob 对象并使用 Ajax 发送

转换为 Blob 对象后，可以使用 Ajax 上传图像文件。

先从 canvas 获取 dataurl, 再将 dataurl 转换为 Blob 对象

let dataurl = canvas.toDataURL("image/png");
let blob = dataURLtoBlob(dataurl);
//使用 ajax 发送
let fd = new FormData();
fd.append("image", blob, "image.png");

let xhr = new XMLHttpRequest();
xhr.open("POST", "/server", true);
xhr.send(fd);
复制代码