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

有什么建议吗？

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）click事件而不是jQuery one。

下载多个dataURL文件

1 个答案: