下载多个dataURL文件答案

【问题标题】：Download multiple dataURL files下载多个dataURL文件
【发布时间】：2013-11-15 18:15:07
【问题描述】：

我正在使用 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;
}

我一直在尝试一键获取多个文件，但不起作用，只下载了一张图片（最后一张画布）：

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在文件拖拽到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 );
}

有什么建议吗？

【问题讨论】：

什么不起作用？它在哪里失败？即使一切顺利，看起来您会将每张图片下载到相同的文件名 - 在您循环浏览图片时它永远不会改变。
炫耀相关的html
已编辑问题，抱歉。

标签： javascript jquery html canvas todataurl

【解决方案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 事件。

【讨论】：

这很有帮助。