Conversor gratuito de texto para imagem

Por que você precisa transformar texto em imagem

Texto e imagens viajam pela internet de formas muito diferentes. O texto é reformatado por cada plataforma que o toca, as fontes mudam, as quebras de linha mudam, a indentação colapsa, caracteres especiais são mutilados. As imagens são atômicas: cada pixel sobrevive. Então sempre que a formatação importa, transformar o texto em imagem é a maneira mais simples de garantir que o que você escreveu é o que as pessoas veem. Cenários comuns: trechos de código compartilhados no Twitter/X (que remove indentação e quebras de linha de posts de texto mas renderiza imagens com prazer); gráficos de citação para Instagram (as legendas do Instagram não permitem nenhuma formatação de fonte, cada post tipográfico estético é uma imagem de texto); assinaturas e banners de fórum em phpBB ou Discourse onde imagens enviadas sobrevivem mas tipografia exótica em BBCode não; captura-de-tela-sem-a-UI quando você quer compartilhar um trecho de texto como se tivesse tirado uma captura de tela mas sem o cromo do navegador ao redor; imagens de botão personalizadas para sites antigos ou e-mails HTML onde a licença de webfont é um problema; WhatsApp Status e sobreposições Snapchat onde texto de imagem estilizado se lê melhor que as próprias ferramentas de legenda das plataformas; assinaturas de e-mail para clientes que removem formatação enriquecida (versões mais antigas do Outlook são notórias, uma assinatura baseada em imagem é a solução alternativa). O fio comum: quando você não pode confiar que o destino renderizará o texto do jeito que você quer, renderize-o como imagem você mesmo primeiro.

Como a API Canvas renderiza texto

O elemento HTML <canvas> expõe um contexto de renderização 2D que lida com texto via três métodos centrais. ctx.font aceita a mesma taquigrafia do CSS ("bold 32px Helvetica, Arial, sans-serif"), peso de fonte, tamanho de fonte e família de fonte em uma string. ctx.fillStyle define a cor (qualquer valor de cor CSS: hex, rgb, hsl, nomeada). ctx.fillText(text, x, y) renderiza o texto na posição dada usando a fonte e o preenchimento atuais. Dois métodos de suporte importam: ctx.measureText(text) retorna um objeto TextMetrics contendo a width renderizada e (em navegadores modernos) actualBoundingBoxAscent e actualBoundingBoxDescent para o cálculo da caixa delimitadora vertical; ctx.textAlign controla o alinhamento horizontal (left, right, center, start, end) relativo à coordenada x; ctx.textBaseline controla o alinhamento vertical (top, middle, alphabetic, hanging, ideographic) relativo à coordenada y. A linha de base alphabetic padrão coloca a coordenada y na linha de base das letras minúsculas, que é a convenção tipográfica mas contraintuitiva para layout, a maioria do código de renderização muda para top para posicionamento y previsível. Texto multilinha não é auto-quebrado: fillText renderiza uma linha em uma única posição. A quebra manual palavra por palavra usando measureText em um loop é o padrão padrão.

Por que apenas sete fontes

As sete escolhas de fonte aqui, Arial, Helvetica, Georgia, Times New Roman, Courier New, Verdana, Impact, são as «fontes web-safe» canônicas que vêm por padrão em essencialmente todas as instalações de desktop Windows, macOS e a maioria das Linux. A lista cresceu do projeto Core Fonts for the Web da Microsoft (1996-2002), que distribuiu Impact, Verdana, Georgia, Trebuchet MS e outras como downloads TrueType gratuitos para semear consistência multiplataforma. Escolher apenas fontes do sistema significa que a imagem renderizada parece a mesma independentemente de qual dispositivo a gera; usar uma Google Font exigiria carregar primeiro o arquivo de fonte via a Promise document.fonts.ready antes de qualquer renderização de texto Canvas, um caminho viável mas mais pesado. Para ferramentas cujo trabalho específico é «tipografia sofisticada», carregar fontes personalizadas é essencial. Para um gerador texto-para-imagem utilitário rápido, as sete escolhas web-safe cobrem essencialmente todo registro tipográfico comum: Arial / Helvetica (sans-serif neutra, o cavalo de batalha), Verdana (sans-serif de alta altura-x projetada para leitura em tela), Georgia / Times New Roman (serif para elegância / formalidade), Courier New (monoespaçada para conteúdo tipo código), Impact (a face de exibição condensada em negrito canônica dos memes). Para tipografia deliberadamente peculiar ou de marca, use uma ferramenta dedicada que carrega fontes personalizadas.

Nitidez Alto-DPI / Retina

Uma implementação Canvas ingênua produz saída desfocada em telas de alta densidade. Telefones, tablets e laptops «Retina» modernos têm um window.devicePixelRatio de 2 (às vezes 3), significando que cada pixel CSS mapeia para 2 (ou 3) pixels físicos. Um Canvas renderizado em suas dimensões CSS tem apenas 1 pixel de detalhe por pixel CSS, que é esticado 2x para exibição, produzindo suavidade visível. A correção é definir as dimensões do backing-store do Canvas (canvas.width e canvas.height) para as dimensões CSS multiplicadas por devicePixelRatio, então usar CSS para travar o tamanho exibido nas dimensões CSS originais, então chamar ctx.scale(devicePixelRatio, devicePixelRatio) para que todas as operações de desenho subsequentes usem o sistema de coordenadas CSS original. Esta ferramenta aplica a correção alto-DPI automaticamente, o PNG baixado é nítido em resolução retina e imprime limpamente em tamanhos de documento típicos.

Trechos de código como imagens, use Carbon em vez

Para compartilhar trechos de código como imagens, o caso de uso mais comum para «texto-para-imagem», há ferramentas dedicadas que lidam com realce de sintaxe, detecção de linguagem, predefinições de tema e decoração de cromo de janela muito melhor do que um gerador genérico texto-para-imagem poderia. Carbon (Dawn Labs, lançado 2017, carbon.now.sh) é a opção canônica: cole código, escolha uma linguagem e um tema, solte a saída renderizada para Twitter/Slack/posts de blog. Ray.so (Raycast, lançado 2022) é o concorrente moderno do Carbon com uma estética padrão ligeiramente mais limpa e melhor manuseio de tema escuro. Codeimg.io, Chalk.ist, Snappify e CodeSnap competem no mesmo nicho com vários diferenciadores (templates, layouts multi-janela, fundos de marca). Para prosa simples, manchetes, citações e assinaturas, este gerador é a forma certa; para código, use Carbon.

PNG vs JPEG vs WebP para imagens de texto

Para imagens que contêm principalmente texto (o que esta ferramenta produz), PNG é quase sempre o formato certo. O texto tem bordas duras e grandes áreas de cor plana, exatamente o que JPEG lida pior. A transformada de cosseno discreta do JPEG borra bordas nítidas com artefatos de toque («ruído de mosquito») que parecem particularmente ruins ao redor de formas de letras. A compressão DEFLATE sem perda do PNG lida com áreas de cor plana eficientemente e mantém o texto nítido em qualquer nível de zoom. PNG também suporta transparência, útil ao sobrepor texto em imagens existentes mais tarde. JPEG só faz sentido para imagens de texto com fundos fotográficos (uma citação em cima de uma foto de paisagem, por exemplo) onde o conteúdo fotográfico domina o tamanho do arquivo. WebP (modo sem perda) dá qualidade equivalente ao PNG em tamanho de arquivo tipicamente 26% menor e é suportado em 97% dos navegadores em 2026. Esta ferramenta exporta PNG para máxima compatibilidade, solte em qualquer aplicativo sem se preocupar com suporte de formato.

Nota de acessibilidade: texto-como-imagem perde pesquisabilidade

Sempre que você transforma texto em imagem, perde três coisas: acessibilidade de leitor de tela (usuários com deficiência visual usando tecnologia assistiva não podem ler texto dentro de uma imagem sem OCR), pesquisabilidade (motores de busca e ferramentas de busca de texto indexam a legenda ou texto alternativo ao redor mas não o conteúdo da imagem em si), e copiar-colar (usuários não podem selecionar e copiar texto de um PNG). Para posts sociais onde o trade-off imagem-como-texto é intencional, isso está bem. Para qualquer coisa que precise ser descobrível, indexável ou acessível, prefira texto HTML real estilizado com CSS e reserve a abordagem imagem-de-texto para contextos onde a plataforma força sua mão. As diretrizes WCAG recomendam fornecer texto alternativo significativo para qualquer texto-como-imagem, no mínimo, transcrevendo o texto visível no atributo alt para que os leitores de tela possam anunciá-lo.

Privacidade: por que somente-navegador importa aqui

O texto que você transforma em imagem é exatamente o tipo de conteúdo onde a privacidade importa: rascunhos de posts sociais, memorandos internos, capturas-de-tela-de-texto de documentos confidenciais, citações de trabalhos não publicados. Geradores texto-para-imagem do lado servidor enviam seu texto para um servidor remoto, onde ele fica em logs. Esta ferramenta roda inteiramente no seu navegador via a API Canvas, verifique na aba Rede do DevTools enquanto gera, ou tire a página do ar (modo avião) após carregar e a ferramenta ainda funciona. Seguro para rascunhos confidenciais, cópia de cliente sob NDA, comunicações internas ou qualquer texto que você não queira ver copiado no disco rígido de um estranho.

Perguntas frequentes