采用 canvas.toBlob 导出图片

采用 canvas.toBlob 导出图片

前言

一直以来，从工作以后接触都是与前端数据可视化相关的工作，所以对于 canvas 可谓是很熟悉了，这个标签要是从 w3c 的规范中抽离出去，可能我就自动失业了。

闲言碎语不多说，开始回到正题。

用 canvas 很多，难免要碰到将 canvas 绘制好的东西，导出成图片的需求。

之前每次有将 canvas 导出图片的需求的时候，一般都是习惯性的采用 HTMLCanvasElement.toDataURL() - Web APIs | MDN 方法。

最近发现，其实这个方法，很早就不是最佳选择了，早该摒弃掉，而选用
HTMLCanvasElement.toBlob() - Web APIs | MDN 方法。

摈弃缘由

首先，我自己试了试 toBlob api，就发现了几个弃用 toDataURL 的理由了。

1. toDataURL 没有 toBlob 好拼写，要是没有 vscode 的 TS server 的辅助，我经常会拼写错误，写小心就写成了 toDataurl 、toDataUrl 等错误的写法
2. toDataURL 是将图片导出生成 base64 字符串；而 toBlob 是将图片导出生成二进制文件，处理速度会快很多
3. toDataURL 是同步执行，直接返回结果；而 toBlob 则是异步操作，接收一个回调函数。同步会阻塞进程，而异步则不会，好处不言而喻。
4. 笔者调试代码的时候，喜欢直接通过 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，我们同样也需要不断的学习，常保一颗谦逊之心，才能让我们成长为更优秀的程序员。