Transformando HTML em imagens
Tags: html, css, javascript, canvas
Published: 2021-02-28 22:47:21

Já pensou ter que fazer uma imagem simples dezenas vezes, examente iguais e mudar somente um nome ou uma data expecífica? acaba se tornando massivo e chato, por isso, neste texto irei te mostrar uma solucção bem simples que qualquer pessoa com o basico de HTML e CSS conseguirá fazer.

Antes de tudo, precisamos criar a base de nosso site. Para efeito de estudos, preparei todo o código no [GitHub](https://github.com/cjuniordev/transform-html-to-image). [Clone o repositório](https://docs.github.com/pt/github/creating-cloning-and-archiving-repositories/cloning-a-repository), e abra no navegador e no editor de texto.

O site é apenas um 'Cartão' de feliz aniversário com o nome e data do aniversariante modificáveis.

![Site modelo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tjm8plk5qxkjls0clvj7.png)

Bom, isso ainda não se tornou uma imagem, né? para isso precisamos transformar todo esse código em uma canvas. O canvas é uma tag(<canvas>) que nos permite desenhar através do JavaScript de maneira muito simples, podendo até criar jogos utilizando ele. [Clique aqui para saber mais](https://developer.mozilla.org/pt-BR/docs/Web/HTML/Canvas).

Porém, você nã precisa saber a fundo como ele funciona para realizar este projeto, pois utilizaremos a lib [html2canvas](https://html2canvas.hertzen.com/) que desenhará tudo sozinha.

## Como utilizar o html2canvas

Primeiramente acesse o site oficial deles através deste [link](https://html2canvas.hertzen.com/), e abra a página com o arquivo minificado(.min.js), selecione todo código(CTRL + A), copie(CTRL + C), crie um arquivo chamado ``html2canvas.min.js`` e cole o código lá dentro(CTRL + V) e salve dentro da pasta ´scripts', tambem é possível utlizá-lo através de gerenciadores de pacotes como o NPM e o Yarn.

![html2canvas](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/3xp7n2rxb4yqgniuqwn3.png)

Agora é necessário importar o script dentro do HTML, para isso é só abrir uma tag <script> com um source indicando o seu caminho, desta maneira:

<script src="./scripts/html2canvas.min.js"></script>

Agora precisamos chamar a função `html2canvas()` passando o nó do html que será transformado em canvas como parametro, e por ser uma Promise, em caso de sucesso, ele nos devolverá o próprio canvas, e caso queira, pode adicioná-lo ao html com um appendChild. Exemplo da própria lib:

```jsx
html2canvas(document.querySelector("#capture")).then(canvas => {
    document.body.appendChild(canvas)
});
```

Para nosso site, pegaremos nosso nó pela classe 'preview', ficará assim:

```jsx
html2canvas(document.querySelector(".preview")).then(canvas => {
    document.body.appendChild(canvas)
});
```

Agora temos uma imagem 'jogada' no html:

![imagem fora](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6a01b2358l1k0ctgdxp9.png)

O site está basicamente pronto, mas vamos pegar o botao de ação e adiconar a chamada da função à um evento usando o 'addEventListener()':

```jsx
let btnGenerate = document.querySelector('.generate-image');

btnGenerate.addEventListener('click', () =>  {
    html2canvas(document.querySelector(".preview")).then(canvas => {
        document.body.appendChild(canvas)
    })
});
```

Pronto, agora o site só gera o código se o evento de click for chamado, se quiser baixar é só clicar com o botão direito e salvar a imagem, porém, vamos deixar ainda mais interessante, fazendo o evento de clicar nos devolver um download. Para isso, vamos usar uma tag 'a' que já deixei pronto no HTML, só é necessario mudar o atributo 'href' e o 'download'. [Clique aqui para saber mais](https://www.w3schools.com/howto/howto_html_download_link.asp).

```jsx
let btnDownload = document.querySelector('.download');

btnDownload.href = canvas.toDataURL('image/png');
btnDownload.download =  'minha-imagem';
btnDownload.click();
```

A primeira linha pega o nó da tag 'a' e salva em uma variável. A segunda 'transforma' o canvas em uma [representação em URL](https://developer.mozilla.org/pt-BR/docs/Web/API/HTMLCanvasElement/toDataURL), e o atribui ao href do nosso elemento. Já a terceira, só muda o nome da imagem e a quarte linha clica no botão para que o download seja efetuado.

O código completo do script de transformar em uma imagem ficará mais ou menos assim:

```jsx
let btnGenerate = document.querySelector('.generate-image');
let btnDownload = document.querySelector('.download');

btnGenerate.addEventListener('click', () =>  {
    html2canvas(document.querySelector(".preview")).then(canvas => {
        btnDownload.href = canvas.toDataURL('image/png');
        btnDownload.download =  'minha-imagem';
        btnDownload.click();
    })
});
```

Lembrando que, para o download ser efetuado, é necessário o documento estar rodando em um servidor, caso seja um projeto caseiro, recomendo que utilize a extensão [live server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) no [vscode](https://code.visualstudio.com/).

Projeto finalizado:

![GIF](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pajl90bs3doxhvx5j4h8.gif)

 - Deixei a projeto finalizado em uma outra branch,  [Clique
   aqui](https://github.com/cjuniordev/transform-html-to-image/tree/final-version) para acessá-la, caso necessite ver o código finalizado.


# Desafios

Para praticar, tente fazer um site que responda uma imagem só pelos parametros de uma url com node ou uma automação que receba vários nomes de um JSON ou Banco de Dados e devolva vários convites.