Como transformar o Canvas do HTML em imagem

Neste artigo você vai aprender a como transformar o Canvas do HTML em imagem, utilizando recursos de JavaScript vanilla

Fala programador(a), beleza? Bora aprender mais sobre canvas, HTML e também JavaScript!

Para capturar a área gerada com o Canvas em imagem temos alguns recursos nativos disponíveis

Teremos que selecionar o canvas utilizando algum método de JS, como o querySelector

Por fim basta utilizar um método chamado toDataUrl com o parâmetro image/png

Isso faz com que uma imagem seja gerada, depois podemos imprimir no nosso HTML

Veja o exemplo primeiramente da seleção do canvas:

const canvas = document.querySelector("#area");
const image = canvas.toDataURL("image/png");

Após este código ser executado teremos uma imagem, precisamos alterar o atributo src da tag img

Neste caso exiberemos a imagem no próprio HTML

Note que nosso canvas tem um id de area, você precisa trocar para o que representa o seu

Veja o código necessário:

const imageElement = document.querySelector("#image");

imageElement.src = image;

Aqui estamos selecionando o elemento de imagem no HTML

E por fim estamos alterando o src baseado no canvas que foi gerado

Agora a imagem do canvas é exibida na nossa página!

Conclusão

Neste artigo você aprendeu a como transformar o Canvas do HTML em imagem

Utilizamos alguns recursos de JavaScript para gerar uma imagem baseada no elemento do canvas

Depois alteramos o src de uma tag img na nossa página para a imagem gerada, e então portamos o canvas para nossa página!

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias!

Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias

O link acima contém um cupom de desconto para os cursos!