Transformando HTML em imagens

Carlos Junior — Sun, 28 Feb 2021 22:47:21 +0000

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. Clone o repositório, 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.

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() que nos permite desenhar através do JavaScript de maneira muito simples, podendo até criar jogos utilizando ele. Clique aqui para saber mais.

Porém, você nã precisa saber a fundo como ele funciona para realizar este projeto, pois utilizaremos a lib html2canvas que desenhará tudo sozinha.

Como utilizar o html2canvas

Primeiramente acesse o site oficial deles através deste link, 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.

Agora é necessário importar o script dentro do HTML, para isso é só abrir uma tag com um source indicando o seu caminho, desta maneira:</p> <script src="./scripts/html2canvas.min.js">

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:



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

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



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

Agora temos uma imagem 'jogada' no html:

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()':



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.



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, 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:



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 no vscode.

Projeto finalizado:

Deixei a projeto finalizado em uma outra branch, Clique aqui 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.

DEV Community: Carlos Junior

Transformando HTML em imagens

Como utilizar o html2canvas

Desafios