前端自动生成图片并下载（不到60行代码）

需求
由于一些简单的图片拼合需要处理（大概7~8000张），但是又没有找到合适的傻瓜软件能够很好地解决需求，同时也很令人头疼的是nodejs里面图片处理库，基本上没几个好用，且安装费时费劲 （当然我还是装了）。作为一个有追求的前端，如果能不依靠其他的东西，直接在前端页面上实现它不香么？于是就有了这个小尝试。其实非常简单，仅以此文记录一下，怕以后不用忘记。

前奏
1.由于canvas的安全限制，我们必须保证资源和网页在同一个域名下进行，否则画入是没问题的，但是导出就会报“画布被污染”的错误。所以我们一共有多个解决办法：

img.setAttribute(‘crossOrigin’, ‘anonymous’)
URL.revokeObjectURL
以上是我个人探索的五种解决办法，分别适合不同场景下的需求。

前两种例子不便于展示，直接下面是三种办法的对应代码例子：

let can = document.getElementById(‘canvas’);
let ctx = can.getContext(‘2d’);
fetch(‘https://img.alicdn.com/bao/uploaded/i1/446338500/O1CN01npzdZ52Cf3A4cx8JG_!!0-item_pic.jpg_240x240.jpg’).then(
res => res.blob())
.then(res => {
let fr = new FileReader();
fr.onload = function (e) {
console.log(e)
console.log(e.target.res