戏词的网页版已经上线了一段时间了。不得不说，在电脑上可以直接拼，不用再把图片通过微信传到手机上再拼图确实方便很多。不过因为前段时间不多，把拼图功能做出来后就赶紧先安排上线了，很多具体的细节并没有进行测试和优化，所以这周自己在用网页版拼图的时候就遇到了些问题。这个还是向我的用户表示下抱歉，我会在之后的时间进行修复。今天刚修复好一个图片过大无法保存的问题，在这边顺便记一下方法。

说来惭愧，当时上线后我还信誓旦旦在朋友圈说到：“没有了小程序的限制，现在可以无限拼图，不会因为遇到图片太大导致闪退的小程序 bug”。结果自己拼的时候，9 张图只要有一张显示了全图就没办法正常保存。几次试验过后，发现能保存的图片大小都在 2M 以下，基本上确定了是图片过大无法保存的锅。那么接下来就是考虑如何解决了。

网页版目前的保存方式是：用户点击保存后，Canvas 进行绘图，再通过 toDataURL 的方法将图片内容转化为 base64，然后通过 a[download] 让用户通过点击进行下载保存。那既然过大的 base64 会导致下载失败，那么就得换一套方案。

本着“前端事，前端闭”的想法，排除了传文件到后台再由后台生成图片的方案。又因为拼图本就绕不过 Canvas，所以还是得从 Canvas 的接口入手，最后找到了 Canvas 的另一个 api：toBlob。MDN 文档的中的介绍一开始就提到了：

HTMLCanvasElement.toBlob() 方法创造 Blob 对象，用以展示 canvas 上的图片；这个图片文件可以被缓存或保存到本地，由用户代理端自行决定。

那接下来就是调用的问题了：

1
2
3
4
5
6
7
8
9
10
canvas.toBlob(
  blob => {
    let el = document.createElemenet("a");
    el.download = `戏词拼图_${new Date().getTime()}`; // 设置文件名称
    el.href = URL.createObjectURL(blob); // 设置文件地址
    el.click();
  },
  "image/jpeg", // 设置文件格式
  1 // 设置文件质量
);

通过在回调方法中创建 a[download] 并点击的事件，就可以直接保存图片。这样一来便解决了一开始遇到的问题。