采用 canvas.toBlob 导出图片
前言
一直以来，从工作以后接触都是与前端数据可视化相关的工作，所以对于 canvas 可谓是很熟悉了，这个标签要是从 w3c 的规范中抽离出去，可能我就自动失业了。
闲言碎语不多说，开始回到正题。
用 canvas 很多，难免要碰到将 canvas 绘制好的东西，导出成图片的需求。
之前每次有将 canvas 导出图片的需求的时候，一般都是习惯性的采用 HTMLCanvasElement.toDataURL() - Web APIs | MDN 方法。
最近发现，其实这个方法，很早就不是最佳选择了，早该摒弃掉，而选用
HTMLCanvasElement.toBlob() - Web APIs | MDN 方法。
摈弃缘由
首先，我自己试了试 toBlob api，就发现了几个弃用 toDataURL 的理由了。
-
toDataURL没有toBlob好拼写，要是没有 vscode 的 TS server 的辅助，我经常会拼写错误，写小心就写成了toDataurl、toDataUrl等错误的写法 -
toDataURL是将图片导出生成 base64 字符串；而toBlob是将图片导出生成二进制文件，处理速度会快很多 -
toDataURL是同步执行，直接返回结果；而toBlob则是异步操作，接收一个回调函数。同步会阻塞进程，而异步则不会，好处不言而喻。 - 笔者调试代码的时候，喜欢直接通过 chrome devtool 测试效果。因此，与我而言，直接在 devtool 写几行代码，就将 canvas 导出成图片进行测试，是最为方便的。借助
$0.toBlob((blob) => console.log(URL.createObjectURL(blob)))直接就能生成一个 blob 链接，在新窗口打开就能看到效果。但是用toDataURL不行，$0.toDataURL()这样调用，会生成一个很长的 base64 字符串。虽说可以将 base64 字符串复制到新窗口打开，但是图片尺寸一大，就吃不消了，操作起来也很费劲。或者可以采用这个方式——convert base64 to image in javascript/jquery - Stack Overflow 将其变成 img 标签在页面上显示出来。相信大家也看到了，用这个方式代码量太大，过于复杂，不如toBolob方便。
当然，以上只是我个人的拙见，于是为了让我的观点更让人信服，我在 stackoveflow 上找到了更令人信服的解释：javascript - Why do canvas.toBlob and canvas.toDataURL have different return types - Stack Overflow。
正如这个回答里所说，其实 toDataURL 的诞生就是一个错误，如果之前有了 toBlob 可能就不会存在这个 API 了。
封装函数
直接用 api，还没法直接把图转出来，还需要我们进一步的封装。
首先，我们创建一个方法，将导出来的 blob，直接保存为下载的图像文件。
// 下载图像
const saveBlob = (blob, fileName) => {
const a = document.createElement('a');
a.style.display = 'none';
const url = window.URL.createObjectURL(blob);
a.href = url;
a.download = fileName;
a.click();
};
其次，假设在我们的页面中，存在一个按钮，其 id 为 screenshot。
然后我们就可以通过 js，朝按钮上添加点击事件了。
const elem = document.querySelector('#screenshot');
elem.addEventListener('click', () => {
canvas.toBlob((blob) => {
saveBlob(blob, `screencapture-${canvas.width}x${canvas.height}.png`);
});
});
后记
有时候，随着时间的推移，我们以前习以为常的用法可能已经过时了。后面可能已经推陈出新，有了更好的用法。所以对于 API，我们同样也需要不断的学习，常保一颗谦逊之心，才能让我们成长为更优秀的程序员。
