saber酱的抱枕

Fly me to the moon

05/2
14:41
学习

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

前情提要:
《在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);
};

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