Как я могу сохранить холст в виде изображения вместо того, чтобы загружать его напрямую?

#javascript #image #canvas #save

Вопрос:

У меня есть игра p5, и я хочу сохранить холст как a p5.Image , чтобы позже показать его на холсте. Однако я нашел только saveCanvas() функцию, которая напрямую загружает изображение холста. Есть ли способ сохранить его в виде изображения для последующего использования?

Ответ №1:

АФАИК в p5.js библиотека не предоставляет способа сделать это. Однако вы можете преобразовать его в URL-адрес данных с помощью этого кода:

 const dataURL = document.querySelector("#myCanvas")
                        .toDataURL()
                        .replace("image/png", "image/octet-stream");
 

Затем вы можете использовать это как обычный источник изображения, например, вы можете перенаправить текущую страницу на изображение:

 window.location.href = dataURL;