Как экспортировать холст HTML в изображение, которое можно загрузить?

Question

В настоящее время у меня есть HTML холст, который интерполирует точки данных, и я хотел бы взять отображаемый холст ниже и позволить пользователю нажать кнопку и загрузить его на свой компьютер.

У меня очень базовый c опыт работы с HTMl в целом, но как мне это сделать? Я предполагаю, что мне нужно написать и связать его с кнопкой на холсте или на веб-странице. Какой из них будет проще?

Спасибо за помощь.

Answer 1

function downloadCanvasContentFn(canvasId = "", fileName = "") {
    let id = "canvasDownloadLinkId";
    //get the link if already exisit in page
    let link = document.getElementById(id);

    //if not create one
    if (link == null) {
        //Create a link
        link = document.createElement('a');
        link.id = id;
    }

    //set file name
    link.download = fileName + '.png';
    //get canvas as data URL
    link.href = document.getElementById(canvasId).toDataURL()
    //click -- this will download
    link.click();
}

Вышеупомянутая функция может быть функцией многократного использования, чтобы помочь загрузить холст в виде файла. Теперь просто передайте canvasid и имя файла для изображения. :)