单击即可从多个画布元素下载多个图像

Question

下载图像时，我可以将画布数据中的图像附加到文档正文，但只下载最后一张图像，为什么？

var canvas = document.getElementsByClassName('canvas');
	for(var i=0; i<canvas.length; i++){
		function doCanvas(){
				ctx = canvas[i].getContext('2d');
				ctx.fillStyle = '#f90';
				ctx.fillRect(0, 0, canvas[i].width, canvas[i].height);
				ctx.fillStyle = '#fff';
				ctx.font = '30px sans-serif';
				ctx.fillText('Canvas_'+i, 10, canvas[i].height / 2 - 15);
		}
		doCanvas();
	}

	document.getElementById('download').addEventListener('click', downloadCanvas, false);
function downloadCanvas() {
				for(var j=0; j < canvas.length; j++){
				this.href = canvas[j].toDataURL();
					var im = document.createElement('img');
					im.src=this.href;
					document.body.appendChild(im);
				this.download = 'test'+j+'.png';
		}
	}

<canvas width="300" height="100" class="canvas"></canvas>
<canvas width="300" height="100" class="canvas"></canvas>
<a id="download" style="background: gray; height: 20px; text-align: center; display: block; width: 100px">Download</a>

Answer 1

经过多次搜索后，我在 JS 库下面找到了。

jszip/
jszip-utils
FileSaver.js

使用这三个，我现在只需单击即可下载多伙伴文件。