我的处女作《Canvas系列教程》在我的Github上正在连载更新，希望能得到您的关注和支持，让我有更多的动力进行创作。
教程介绍、教程目录等能在README里查阅。
传送门：https://github.com/827652549/CanvasStudy
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>
