canvas.toDataURL（）下载大小限制 [英] canvas.toDataURL() download size limit

问题描述

我试图使用canvas.toDataURL（）下载整个画布图像。

I am attempting to download an entire canvas image using canvas.toDataURL(). The image is a map rendered on the canvas (Open Layers 3).

在Firefox中，我可以使用下面的链接来下载地图：

In Firefox I can use the following to download the map on the click of a link:

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中，我的链接大小限制。我必须将窗口缩小以便下载工作。

However in Chrome and Opera I'm hitting a size limit on the link. I have to physically make the window smaller for the download to work.

浏览器之间存在大小限制，Chrome是特别有限的。此处的类似信息（已超过2年）表明广泛的服务器端解决方法：

There are size limit differences between browsers, Chrome is particularly limiting. A similar post here (over 2 years old now) suggests an extensive server side workaround:

用于大画布的canvas.toDataURL（）

为此工作吗？

推荐答案

查看 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，所以你得到最好的支持。

browser support is not as awesome as toDataURL though. But Chrome and Firefox have it, so it solves your biggest issue. The mdn link above also has a polyfill based on toDataURL, so you get the best possible support.

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

这篇关于canvas.toDataURL（）下载大小限制的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！