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!