-1
イメージをダウンロード中キャンバスデータからドキュメント本文にイメージを追加できますが、最後のイメージのみがダウンロードされますなぜですか？私はJSライブラリの下に見られる多くの検索で苦労した後ワンクリックで複数のキャンバス要素から複数のイメージをダウンロード
var canvas = document.getElementsByClassName('canvas');
\t for(var i=0; i<canvas.length; i++){
\t \t function doCanvas(){
\t \t \t \t ctx = canvas[i].getContext('2d');
\t \t \t \t ctx.fillStyle = '#f90';
\t \t \t \t ctx.fillRect(0, 0, canvas[i].width, canvas[i].height);
\t \t \t \t ctx.fillStyle = '#fff';
\t \t \t \t ctx.font = '30px sans-serif';
\t \t \t \t ctx.fillText('Canvas_'+i, 10, canvas[i].height/2 - 15);
\t \t }
\t \t doCanvas();
\t }
\t document.getElementById('download').addEventListener('click', downloadCanvas, false);
function downloadCanvas() {
\t \t \t \t for(var j=0; j < canvas.length; j++){
\t \t \t \t this.href = canvas[j].toDataURL();
\t \t \t \t \t var im = document.createElement('img');
\t \t \t \t \t im.src=this.href;
\t \t \t \t \t document.body.appendChild(im);
\t \t \t \t this.download = 'test'+j+'.png';
\t \t }
\t }<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>