Canvas.toDataURL() скачать ограничение по размеру

Я пытаюсь загрузить изображение всего холста, используя 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() для большого холста

Есть ли клиентская сторона для этого вообще?

Ответы

Ответ 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);