javascript - 下载多个 dataURL 文件

Question

我正在使用 HTML 5 Canvas 创建纯 Javascript 图像缩放器。我有一个将 Canvas 下载为图像文件的链接。

这适用于单个文件:

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

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

我一直在尝试通过一次点击获取多个文件，但不起作用，只下载了一张图片(最后一张 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' );
    } );
}

这里是相关的 HTML，Canvas 是由 JS 在文件拖动到拖放区域时动态添加的:

<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].click) 单击事件而不是 jQuery 元素。