canvas.toDataURL（）下載大小限制

我試圖使用canvas.toDataURL（）下載整個畫布圖像。該圖像是在畫布上呈現的地圖（打開圖層3）。canvas.toDataURL（）下載大小限制

在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

是否有一個客戶端解決有關此呢？

來源

2016-02-18 Single Entity

退房toBlobhttps://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);

來源

2016-02-18 11:48:44 Prinzhorn

這正是我想要縮小尺寸。 –

toBlob是相當有限的瀏覽器[鏈接]（https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toBlob）就像一個FYI。取決於IE/Safari的重要性。 – hipkiss

canvas.toDataURL（）下載大小限制

回答

相關問題