Gerar imagens usando Reagir, Vue ou Angular usando o manipulador de marionetes

Michele Riva Segue 15 de jul · 5 min ler

Recentemente, comecei a redesenhar todas as imagens em destaque do JSMonday usando um novo formato (aquele que você está vendo na imagem acima). Eu precisava criar 60 novas imagens para 20 artigos à mão. São 3 imagens por artigo – as imagens do Open Graph, Instagram, e Instagram.

Quão ótimo seria gerar o novo conjunto de imagens do artigo simplesmente fazendo uma solicitação REST e enviando o título, a legenda e a imagem de plano de fundo?

Vamos ver como fazer isso configurando um projeto simples usando React e Puppeteer.

Primeiro, vamos dividir nosso projeto entre o aplicativo React (a interface do usuário que construímos da imagem + texto) e o script de renderização da imagem, queremos uma estrutura de pastas como esta:

Vamos começar criando um novo aplicativo React com create-react-app :

Ótimo! Agora vamos pensar sobre qual tipo de imagem queremos criar.
Para este artigo, gostaria de criar uma imagem FullHD (1920 * 1080px) com algum texto nela. Vamos desenhá-lo apenas para ter uma referência durante o desenvolvimento:

Como você pode ver, estamos usando uma fonte do Google ( Roboto ) e uma imagem da Unsplash , então precisaremos renderizá-las dentro de nossos componentes.

Vamos começar criando nosso componente de plano de fundo. Observe que uma arquitetura React limpa não é uma meta para este artigo. Nós só precisamos criar algo que funcione e torná-lo uma imagem!

O componente de plano de fundo

Como você pode ver, estamos apenas criando um componente fácil que pegará a imagem de fundo de props e renderizará todo o conteúdo transmitido como um elemento children .

O componente do título

O componente Title é ainda mais simples – é preciso usar um prop chamado text e renderizá-lo dentro de uma tag h1 .

O componente de legendas

Assim como o componente Title , o Subtitle pegará um prop chamado text e o renderizará dentro de um div . Bem simples!

O componente App

Com o componente App , estamos montando toda a imagem e texto. Vamos ver o resultado em um navegador da web:

Impressionante! Isso é exatamente o que precisamos.

Renderizando o Projeto Reagir como um Arquivo PNG

Precisamos criar uma versão de produção do nosso aplicativo React. Vamos adicionar a propriedade "homepage” ao nosso arquivo package.json fará com que funcione localmente apenas abrindo o arquivo index.html gerado com um navegador:

Agora vamos iniciar a construção usando os scripts padrão create-react-app :

Ótimo! Agora temos a seguinte estrutura de pastas:

Separamos o projeto do aplicativo React do projeto Render (aquele que irá gerar a imagem para nós). Dentro do diretório /react-project/build , podemos encontrar o build de produção que usaremos para gerar nossa imagem.

Agora vamos nos mover dentro da nossa pasta render-project e inicializar um novo arquivo package.json .

Agora vamos adicionar a única dependência que precisamos, Puppeteer .

Puppeteer é uma incrível biblioteca construída pelo Google que expõe APIs do Google Chrome sem cabeçalho . Isso significa que quase tudo que podemos fazer no Google Chrome pode ser feito usando essa incrível biblioteca!

Vamos ver como implementar a geração de imagens:

E é isso! Apenas 14 linhas de código que irão gerar uma imagem PNG da nossa cena React!

Vamos analisar em profundidade o que estamos fazendo:

  1. Criamos um novo navegador Puppeteer.
  2. Nós criamos uma nova página.
  3. Nós definimos seu URL de destino para o nosso arquivo index.html gerado. Por favor, note que estamos usando file:// , o protocolo http não funcionará localmente para este caso específico!
  4. Nós definimos a viewport para 1920×1080 pixels. Dessa forma, cobriremos toda a cena do React e capturaremos tudo com o próximo script.
  5. Pegamos a captura de tela da página e a ./myAwesomeImage.png arquivo ./myAwesomeImage.png .
  6. Nós fechamos o navegador.

E agora vamos ver o resultado:

Você consegue adivinhar qual é a imagem original e qual foi gerada com React? Nem eu!

Você pode encontrar o projeto completo neste repositório:

jsmonday / jsm22

Código Fonte do 22º Artigo JSMonday. Contribua para o desenvolvimento do jsmonday / jsm22 criando uma conta no GitHub.

github.com