我的处女作《Canvas系列教程》在我的Github上正在连载更新,希望能得到您的关注和支持,让我有更多的动力进行创作。
教程介绍、教程目录等能在README里查阅。
HTMLCanvasElement.toBlob()
方法创造Blob
对象,用以展示canvas上的图片;这个图片文件可以被缓存或保存到本地,由用户代理端自行决定。如不特别指明,图片的类型默认为 image/png,分辨率为96dpi。
第三个参数用于针对image/jpeg格式的图片进行输出图片的质量设置。
语法
canvas.toBlob(callback, type, encoderOptions);
参数
callback
回调函数,可获得一个单独的Blob
对象参数。
type
可选
DOMString
类型,指定图片格式,默认格式为image/png
。
encoderOptions
可选
Number
类型,值在0与1之间,当请求图片格式为image/jpeg
或者image/webp
时用来指定图片展示质量。如果这个参数的值不在指定类型与范围之内,则使用默认值,其余参数将被忽略。
返回值
无。
异常
SecurityError
canvas“被污染”的情况下不能使用此方法
示例:将canvas图像转化为文件
当一个内容画到canvas上时,我们可以将它生成任何一个格式支持的图片文件。比如,下面的代码段获得了id为“canvas”的<canvas>
元素中的图像,复制成一个PNG图,在文档中加入一个新的<img>
元素,这个<img>
元素的源图就是使用canvas创建的那个图像。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Canvas对象的toBlob方法示例</title>
</head>
<body>
<canvas id="canvas"></canvas>
</body>
<script>
//获取canvas元素
var canvas = document.getElementById("canvas");
//第一个参数是回调函数
canvas.toBlob(
//传入blob对象
function (blob) {
//创建一个img标签
var newImg = document.createElement("img"),
//以blob对象为基础创建一个url
url = URL.createObjectURL(blob);
console.log(url);
//blob:http://localhost:63342/d869ed9c-cad0-49f9-9965-e9959a15e0c0
console.log(blob);
//返回一个BLOB对象
//加载后销毁
newImg.onload = function () {
// no longer need to read the blob so it's revoked
URL.revokeObjectURL(url);
};
//img标签属性赋值
newImg.src = url;
//添加为子元素
document.body.appendChild(newImg);
});
</script>
</html>
注意,我们这里创建的是PNG图片;如果在toBlob()传入第二个参数,就可以指定图片格式。例如,生成JPEG格式的图片
canvas.toBlob(function(blob){...}, "image/jpeg", 0.95); // JPEG at 95% quality