terça-feira, 12 de agosto de 2014

Salvando uma imagem com background a partir de canvas

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.