下載多個dataURL文件

Question

我使用HTML 5畫布創建純Javascript圖像調整器。我有一個鏈接將畫布下載爲圖像文件。

這適用於單個文件：

$('#dl').on('click', function(e) { 
    e.preventDefault(); 
    downloadCanvas(this, 'test.png'); 
}); 

function downloadCanvas(link, filename) { 
    link.href = $('#preview canvas')[0].toDataURL(); 
    link.download = filename; 
} 

我一直想這讓在點擊多個文件，但不起作用，只有1圖像被下載（最後帆布）：

function downloadCanvas(link, filename) { 
    $('#preview canvas').each(function(i) { 
     var dataUrl = this.toDataURL('image/png') 
     console.log(dataUrl); 
     $('#down').attr({ 
      href: this.toDataURL('image/png'), 
      download: filename + i 
     }).trigger('click'); 
    }); 
} 

以下是有關HTML，畫布是動態生成JS添加的文件拖動到droparea：

<div id="droparea">Drop image here</div> 
<div class="clear"></div> 
<div id="preview" class="clear"> 
     <h1>Preview</h1> 
</div> 
<a id="dl" href="#">Download</a> 
<a id="down" href="#">Hidden</a> 

JS：

$('#droparea').on('dragover dragenter', function(e) { e.preventDefault(); e.stopPropagation(); }) 
.on('drop', function(e) { 
    e.preventDefault(); 
    loadImage(e.originalEvent.dataTransfer.files[0]); 
}); 

function render(src) { 
    var image = new Image(); 
    image.onload = function() { 
     var canvas = $('<canvas>'), 
     ctx = canvas[0].getContext("2d"); 
     ctx.clearRect(0, 0, canvas.width, canvas.height); 
     image.width *= maxH/image.height; 
     image.height = maxH; 
     canvas[0].width = image.width; 
     canvas[0].height = image.height; 
     ctx.drawImage(image, 0, 0, image.width, image.height); 
     $('#preview').append(canvas).show(); 
    }; 
    image.src = src; 
} 
function loadImage(src) { 
    if(!src.type.match(/image.*/)) { 
     console.log("The dropped file is not an image: ", src.type); 
     return; 
    } 
    var reader = new FileReader(); 
    reader.onload = function(e) { 
     render(e.target.result); 
    }; 
    reader.readAsDataURL(src); 
} 

有什麼建議？

Answer 1

此制定了我：

function downloadCanvas(link, filename) { 
    $('#preview canvas').each(function(i) { 
     var dataUrl = this.toDataURL('image/png') 
     console.log(dataUrl); 
     $('#down').attr({ 
      href: this.toDataURL('image/png'), 
      download: filename + i + ".png" 
     })[0].click(); 
    }); 
} 

我使用的原料DOM元素（[0]。點擊）點擊，而不是jQuery的一個事件。