canvas.toDataURL()下载大小限制

Question

我试图使用canvas.toDataURL()下载整个画布图像.图像是在画布上呈现的地图(打开图层3).

在Firefox中,我可以使用以下内容通过点击链接下载地图:

var exportPNGElement = document.getElementById('export_image_button');

if ('download' in exportPNGElement) {
    map.once('postcompose', function(event) {
    var canvas = event.context.canvas;
    exportPNGElement.href = canvas.toDataURL('image/png');
});

map.renderSync();

} else {
alert("Sorry, something went wrong during our attempt to create the image");
}

但是在Chrome和Opera中,我对链接的大小限制.我必须在物理上使窗口更小,以便下载工作.

浏览器之间存在大小限制差异,Chrome特别受限制.这里的类似帖子(现在已超过2年)表明了一个广泛的服务器端解决方法:

canvas.toDataURL()用于大画布

是否有客户端为此工作？

Answer 1

查看toBlob https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob

canvas.toBlob(function(blob) {
    exportPNGElement.href = URL.createObjectURL(blob);
});

浏览器支持并不像那样令人敬畏toDataURL.但是Chrome和Firefox都有它,所以它解决了你最大的问题.上面的mdn链接也有一个基于的polyfill toDataURL,所以你得到了最好的支持.

如果你不知道,你也可以使用jpeg压缩大大减小尺寸

exportPNGElement.href = canvas.toDataURL('image/jpeg', 0.7);