Download multiple dataURL files

Question

I'm creating a pure Javascript image resizer using HTML 5 canvas. I have a link that downloads the canvas as an image file.

This works for single files:

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

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

I've been trying this to get multiple files in one click, but does not work, only 1 image is downloaded (last canvas):

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' );
    } );
}

Here's the relevant HTML, Canvas is dynamically added by JS on file drag to 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 );
}

Any suggestions?

Answer 1

This worked out for me:

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();
    } );
}

I used the raw DOM element ([0].click) click event instead of the jQuery one.