Olá galera,
Esses dias precisei salvar uma imagem a partir do canvas. Só clicando com o botão direito e pedindo para salvar como imagem funciona. Então qual o problema? O click com o botão direito já tinha um evento mapeado e o background do PNG gerado era transparente.
O problema foi solucionado com Javascript através de uma simples página HTML com um botão.
Código HTML:
<!DOCTYPE html> <html lang="pt-br"> <head> <title>Canvas</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <canvas id="canvas" width="200" height="200"></canvas> <button>Baixar</button> <script defer="defer" src="canvas.js"></script> </body> </html>
Código Javascript:
var button = document.getElementsByTagName('button'); button[0].addEventListener('click', function() { var canvas = document.getElementById("canvas"); var w = canvas.width; var h = canvas.height; var context = canvas.getContext('2d'); var data = context.getImageData(0, 0, w, h); context.fillStyle = "rgb(255,0,0)"; context.fillRect(0,0,w,h); window.location.href = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); context.clearRect (0,0,w,h); context.putImageData(data, 0,0); });
Explicando o código do Javascript:
Linha 3 - Adicionando o evento de click ao botão.Linha 7 - Retorna o objeto com métodos e propriedades para desenhar na tela.
Linha 8 - Retorna o objeto ImageData que copia os dados do pixel para a geometria com largura e alturas definidas.
Linha 9 - Retorna a cor usada para preencher o desenho.
Linha 10 - Desenha o retângulo "cheio".
Linha 11 - Conversão e exportação do desenho do canvas em uma URL codificada PNG de 64 bits.
Linha 13 - Limpa os pixels especificado dentro do retângulo.
Linha 14 - Coloca os dados da imagem (a partir do objeto ImageData especificado) de volta para a tela.
Fica aí a dica de hoje.
Um grande abraço a todos.