05/2
2017
前情提要：
《在JavaScript中创建Blob对象》
《使用canvas将图片转换为base64编码》
之前的这两篇文章都是为在网页上下载文件而服务的。Blob对象可以通过URL.createObjectURL(blob)方法来生成一个blob协议的url，而canvas可以通过canvas.toDataURL()来生成一个base64编码的url。这两种url都可以用a标签的download属性来下载。
注意：
将数据（包括canvas对象）转换为blob时，会受到跨域限制。
canvas酱图片转换为base64编码时也会受到跨域限制。
使用a标签下载文件时，在firefox里会受到跨域限制。
之前我没发现canvas对象是可以转换成Blob对象的，今天才知道有一个HTMLCanvasElement.toBlob()方法可以做到。
语法如下：
canvas.toBlob(callback, mimeType, qualityArgument);
说人话：
canvas.toBlob(function(blob) {
// code...
},"image/jpeg", 0.8);
toBlob方法内有一个回调函数，其参数就是canvas对象转换后的生成的blob对象；
如果缺少mimeType参数，则默认为png格式。
相比使用base64编码的url，blob格式的url更加简洁，我喜欢后者。不过base64编码其实储存的是文件本身，它方便重复使用。而blob对象则在刷新页面后就没了，blob格式的url也就不能重用了。
如下代码，先加载一个图片，然后将其绘制在canvas里，之后将canvas元素转化为blob对象，再用一个a标签来做下载功能。
var Img = new Image();
Img.src = "58319482.jpg";
Img.onload = function() {
var canvas = document.createElement("canvas");
canvas.width = Img.width;
canvas.height = Img.height;
canvas.getContext("2d").drawImage(Img, 0, 0, Img.width, Img.height); //将图片绘制到canvas中
canvas.toBlob(function(blob) {
var downloadA = document.createElement("a");
document.body.appendChild(downloadA);
downloadA.style.display = "none";
downloadA.setAttribute("download", "download.jpg");
downloadA.setAttribute("href", URL.createObjectURL(blob));
downloadA.click();
}, "image/jpeg", 0.8);
};
