前情提要：

《使用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); };

使用toBlob()方法将canvas对象转换为Blob对象