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() for large canvas

是否有客户端为此工作？

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链接还有一个基于toDataURL的polyfill，因此您可以获得最佳支持。

万一你不知道，你也可以使用jpeg压缩来大幅减小尺寸

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

canvas.toDataURL（）下载大小限制

1 个答案: