Как сохранить холс?

Question

[SpeNch]

Как сохранить холст канвас в папку, в виде png файла

Answer 1

[Василий Банников]

const canvas = document.querySelector("#canvas"); // берём канвас
canvas.toBlob(blob => { //Переводим в блоб
            // Делаем специальную ссылку
            const url = window.URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.style.display = 'none';
            a.href = url;
            a.download = "canvas.png"
            document.body.appendChild(a);
            // кликаем по ссылке
            a.click();
            //убираем
            window.URL.revokeObjectURL(url);
            a.remove();
        });

Comments

[SpeNch]

!1! вы меня не так поняли, я хочу чтобы я получившийся холст по кнопке сайта загрузил в папку сервера!! а не скачал

[Василий Банников]

SpeNch, а. Ну тогда то же самое, но внутри toBlob надо засунуть колбэк, который сделает запрос на сервер.
что-то типа

async function uploadBlob(blob) {
    await fetch("https://example.com/upload", {
       method: "POST",
       body: blob
       });
}

Ну или
https://developer.mozilla.org/ru/docs/Web/API/Fetc...

Answer 2

[Stalker_RED]

У меня есть набросок

Нас троках 16-19 создается ссылка-downloader и на строке 32 цепляется на кнопку, или что вам угодно.

Comments

[SpeNch]

!1! вы меня не так поняли, я хочу чтобы я получившийся холст по кнопке сайта загрузил в папку сервера!! а не скачал

[Stalker_RED]

SpeNch, тогда берите canvas.toDataURL() и отправляйте ajax-ом. Ну и на сервере какую-то сохранялку сделайте.