我一开始想的也是canvas，不过看到题主已经试过了。其他的我还没想到什么办法。
但针对你说的“文件体积过大”，如果你是将图片用canvas转换成了base64的话，那么可能是因为你把图片格式设置成了png格式，比如：
canvas.toDataURL('image/png')
如果是这样的话，那么你可以转换成jpeg格式，并且可以控制转换质量，这样保存下来就小了。比如：
canvas.toDataURL('image/jpeg',0.5);
我感觉这样的话，在体积上应该不存在问题了。
ps：楼上所说a标签的download属性，我用过，但对题主的情况来说可能有点问题。
1.可能仍旧需要请求。如果download属性能从缓存中读取图片来保存，那么对于有缓存的图片可能不需要请求（其实我尚不清楚其是否有读取缓存图片的机制，也许根本没有）。但对于大图片，即使在网页里加载完了，用download属性下载还需要从服务器下载。
<a href="https://files.yande.re/image/eb619bf8aff0bd440ec724211fce245c/yande.re%20389825%20dress%20elf%20erect_nipples%20makita_yoshiharu%20no_bra%20nopan%20open_shirt%20pointy_ears%20see_through%20skirt_lift.jpg" download="a.jpg">xxxxx</a> <br> <img src="https://files.yande.re/image/eb619bf8aff0bd440ec724211fce245c/yande.re%20389825%20dress%20elf%20erect_nipples%20makita_yoshiharu%20no_bra%20nopan%20open_shirt%20pointy_ears%20see_through%20skirt_lift.jpg">
2.download属性在firefox里，需要href里的文件和当前网页的域名同源，否则不会下载。不过从题主的情况来看，应该是同源的，不存在这问题。
3.
a标签download属性可以支持，但是存在兼容性问题；更好的支持一般需要服务端完成。
我一开始想的也是canvas，不过看到题主已经试过了。其他的我还没想到什么办法。
但针对你说的“文件体积过大”，如果你是将图片用canvas转换成了base64的话，那么可能是因为你把图片格式设置成了png格式，比如：
如果是这样的话，那么你可以转换成jpeg格式，并且可以控制转换质量，这样保存下来就小了。比如：
我感觉这样的话，在体积上应该不存在问题了。
ps：楼上所说a标签的download属性，我用过，但对题主的情况来说可能有点问题。
1.可能仍旧需要请求。如果download属性能从缓存中读取图片来保存，那么对于有缓存的图片可能不需要请求（其实我尚不清楚其是否有读取缓存图片的机制，也许根本没有）。但对于大图片，即使在网页里加载完了，用download属性下载还需要从服务器下载。
2.download属性在firefox里，需要href里的文件和当前网页的域名同源，否则不会下载。不过从题主的情况来看，应该是同源的，不存在这问题。
3.
a标签download属性可以支持，但是存在兼容性问题；更好的支持一般需要服务端完成。