Canvas.toDataURL() 下载大小限制

Question

我想尝试使用canvas.toDataURL()下载整个画布图像。 该图片是在画布上渲染的地图（Open Layers 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 是否有任何客户端解决方案？

- Single Entity

Answer 1

查看toBlobhttps://developer.mozilla.org/zh-CN/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);

- Prinzhorn

---

这正是我想要的。 - Single Entity

toBlob在浏览器方面有一定的限制link。只是作为一个提示。这取决于IE / Safari的关键性程度。 - hipkiss