Почему html2canvas сохраняет белую картинку?

Question

[nualua]

Здравствуйте, стоит простейшая задача - сохранить отдельный HTML контейнер в jpeg.
Имеется следующий код:

$('.btn-save-as-jpeg').click((event) => {
        var container = document.querySelector('svg');
        html2canvas(container).then(function(canvas) {
            var link = document.createElement("a");
            document.body.appendChild(link);
            link.download = "html_image.jpeg";
            link.href = canvas.toDataURL("image/jpeg");
            link.target = '_blank';
            link.click();
            link.remove();
        });
    })

Но вместо содержимого контейнера получаю просто белый фон, но при этом размер картинки и размеры контейнера совпадают, почему такое может быть?

Comments

[Aetae]

Может это поможет: stackoverflow

Answer 1

[Александр]

Потому что это SVG. SVG-картинку можно перегнать как-то так:

function saveImage(url, name) {
    const image = new Image();
    image.addEventListener('load', () => {
        const link = document.createElement('a');
        const canvas = document.createElement('canvas');
        const context = canvas.getContext('2d');

        [canvas.width, canvas.height] = [image.width, image.height];
        context.drawImage(image, 0, 0);

        link.setAttribute('href', canvas.toDataURL());
        link.setAttribute('download', name);

        link.click();
    });

    image.src = url;
}