Converter HTML para imagem

22

Antecedentes

Converta em lote vários arquivos de origem destacados de sintaxe (C, SQL, Java, PHP, lote, bash) em imagens de alta resolução (600dpi), adequados para um eBook e livro impresso.

Soluções com falha

Várias tentativas até agora:

  • OpenOffice ou LibreOffice - Tem que reimportar o código-fonte no documento sempre que o arquivo de origem for alterado. (Ou seja, a solução não pode ser facilmente automatizada para centenas ou milhares de arquivos de origem.)
  • enscript. Não é possível alterar facilmente as cores, processa de forma imperfeita a saída, não é abrangente.
  • LyX / LaTeX. Representa a saída de maneira imperfeita.
  • gvim para HTML - HTMLDOC para PostScript - GhostScript para PNG. HTMLDOC ignora font tags.
  • gvim para HTML - html2ps - GhostScript para PNG. As cores RGB não são reconhecidas por html2ps .
  • Firefox para PostScript - GhostScript para PNG. Obnoxiously tortuoso.
  • gvim para HTML - OmniFormat para qualquer coisa. Versão livre não adequada para processamento em lote; muitos pop-ups de publicidade.
  • pygments. Não é possível alterar facilmente a resolução da imagem; não tem a gama de esquemas de cores do gvim.

Solução mais próxima

A solução que quase funciona é:

  • gvim para HTML - wkhtmltopdf para PDF. Será necessário o pós-processamento com o ImageMagick ( wkhtmltoimage não pode definir a resolução da imagem, apenas a largura da página).

Requisitos

  • Windows e Linux, mas também é aceitável.
  • Gratuito ou OSS
  • Apenas na linha de comandos (adequado para processamento em lote)
  • Altere facilmente o esquema de cores
  • Suporte: PHP, lote, bash, Java, JavaScript, R, C e SQL

Pergunta

Quaisquer outras maneiras de converter o código-fonte com destaque de sintaxe em uma imagem de alta resolução (600dpi)?

Obrigado!

    
por Dave Jarvis 20.11.2010 / 22:04

3 respostas

9

Requisitos de software

Os seguintes pacotes de software estão disponíveis para os sistemas Windows e Linux e são necessários para uma solução completa e funcional:

  • gvim - Usado para exportar o código-fonte realçado da sintaxe para HTML.
  • moria - Esquema de cores para realce de sintaxe.
  • wkhtmltoimage - usado para converter documentos HTML em arquivos PNG.
  • gawk e sed - Ferramentas de processamento de texto.
  • ImageMagick - usado para cortar o PNG e adicionar uma borda.

Etapas gerais

Veja como a solução funciona:

  1. Carregue o código-fonte em um editor que possa adicionar salpicos de cor.
  2. Exporte o código-fonte como um documento HTML (com tags FONT incorporadas).
  3. Retire o atributo background do documento HTML (para permitir transparência).
  4. Converta o documento HTML em um arquivo PNG.
  5. Apare a borda PNG.
  6. Adicione uma pequena margem de 25 pixels ao redor da imagem.
  7. Excluir arquivos temporários.

O script gera imagens com a mesma largura para arquivos de origem que contenham linhas com menos de 80 caracteres. Os arquivos de origem com linhas com mais de 80 caracteres resultam em imagens tão amplas quanto necessário para reter toda a linha.

Instalação

Instale os componentes nos seguintes locais:

  • gvim - C:\Program Files\Vim
  • moria - C:\Program Files\Vim\vim73\colors
  • wkhtmltoimage - C:\Program Files\wkhtml
  • ImageMagick - C:\Program Files\ImageMagick
  • Gawk e Sed - C:\Program Files\GnuWin32

Nota: O ImageMagick tem um programa chamado convert.exe , que não pode substituir o comando Windows convert . Por causa disso, o caminho completo para convert.exe deve ser codificado no arquivo de lote (em vez de adicionar o ImageMagick ao PATH ).

Variáveis de ambiente

Defina a variável de ambiente do PATH para:

"C:\Program Files\Vim\vim73";"C:\Program Files\wkhtml";"C:\Program Files\GnuWin32\bin"

Arquivo em lote

Execute-o usando:

src2png.bat src2png.bat

Crie um arquivo de lote chamado src2png.bat copiando o seguinte conteúdo:

@ECHO OFF

SET NUMBERS=-c "set number"
IF "%2" == "" SET NUMBERS=

ECHO Converting %1 to %1.html...
gvim -e %1 -c "set nobackup" %NUMBERS% -c ":colorscheme moria" ^
  -c :TOhtml -c wq -c :q

REM Remove all background-color occurrences (without being self-referential)
sed -i "s/background-color: #......; \(.*\)}$/ }/g" %1.html

ECHO Converting %1.html to %1.png...
wkhtmltoimage --format png --transparent --minimum-font-size 80 ^
  --quality 100 --width 3600 ^
  %1.html %1.png

move %1.png %1.orig.png

REM If the text file has lines that exceed 80 characters, don't crop the
REM resulting image. (The book automatically shrinks large images to fit.)
REM The 3950 is the 80 point font at 80 characters with padding for line
REM numbers.
SET LENGTH=0
FOR /F %%l IN ('gawk ^
  "BEGIN {x=0} {if( length($0)>x ) x=length()} END {print x;}" %1') ^
DO (
  SET LENGTH=%%l
)
SET EXTENT=-extent 3950x
IF %LENGTH% GTR 80 SET EXTENT=

REM Trim the image height, then extend the width for 80 columns, if needed.
REM The result is that all images will be resized the same amount, thus
REM making the font size the same maximum for all source listings. Source
REM files beyond the 80 character limit will be scaled as necessary.
ECHO Trimming %1.png...
"C:\programs\ImageMagick\convert.exe" -format png %1.orig.png ^
  -density 150x150 ^
  -background none -antialias -trim +repage ^
  %EXTENT% ^
  -bordercolor none -border 25 ^
  %1.png

ECHO Removing old files...
IF EXIST %1.orig.png DEL /q %1.orig.png
IF EXIST %1.html DEL /q %1.html
IF EXIST sed*. DEL /q sed*.

Melhorias e otimizações bem-vindas.

Nota: A versão mais recente do wkhtmltoimage lida corretamente sobre a cor do plano de fundo. Assim, a linha para remover o CSS para cores de fundo não é mais necessária, em teoria.

    
por 21.11.2010 / 06:47
3

lendo a manpage de wkhtmltoimage :

 -d,    --dpi   <dpi>   Change the dpi explicitly

se isso não ajudar: criar uma solução simples com o Qt e o (incluído) Webkit é bastante simples.

    
por 20.11.2010 / 22:13
0

Você também pode usar o Open Office para HTML e > Linha de comando do formulário de conversão em PDF:

link

    
por 01.04.2011 / 08:48