Converter HTML em imagem

22

fundo

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

Soluções com falha

Até agora, várias tentativas:

  • OpenOffice ou LibreOffice - É necessário reimportar o código fonte no documento toda vez que o arquivo fonte 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, renderiza imperfeitamente a saída, não é abrangente.
  • LyX / LaTeX. Renderiza imperfeitamente a saída.
  • gvim para HTML - HTMLDOC para PostScript - GhostScript para PNG. HTMLDOC ignora fonttags.
  • 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 gratuita inadequada para processamento em lote; muitos pop-ups de publicidade.
  • pigmentos. Não é possível alterar facilmente a resolução da imagem; não possui a variedade de esquemas de cores do gvim.

Solução mais próxima

A solução que quase funciona é:

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

Exigências

  • Windows e Linux, mas qualquer um é aceitável.
  • Grátis ou OSS
  • Somente linha de comando (adequada para processamento em lote)
  • Mude facilmente o esquema de cores
  • Suporte: PHP, lote, bash, Java, JavaScript, R, C e SQL

Questão

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

Obrigado!

Dave Jarvis
fonte
@ Dave Jarvis: por que wkhtmltoimagee definir a largura da página não é suficiente? a altura não pode ser especificada, pois é determinada pelo conteúdo do material html. imho width é tudo o que você realmente precisa, você pode calcular a largura necessária com base em quantos pixels por polegada deseja.
Akira
@ Dave Jarvis: bem, diga-me quantas polegadas munch você deseja cobrir e eu digo quantos pixels você precisará. 'aparar' o resultado com o convertido posteriormente é uma boa ideia, mas destrói um pouco a ideia de 'dpi'. você sempre começa com "eu preciso preencher essa x polegada de espaço e quero que ela seja preenchida com z pontos por polegada" .. e, com base nessa fórmula, você solicita pixels.
akira
@akira: A largura depende do número de colunas que o código fonte usa. Às vezes, a largura será de 75 caracteres. Às vezes, serão 40 caracteres. Portanto, 75 caracteres devem ocupar cerca de 5,5 polegadas e 40 caracteres devem ter um pouco mais da metade disso. O valor 5.5 depende das margens do livro, que estão sujeitas a alterações (uma ou duas vezes). Este é um cálculo que precisa ser feito automaticamente, a propósito, caso contrário, a solução não pode ser automatizada, o que derrota todo o objetivo.
Dave Jarvis
@ Dave Jarvis: sim, eu entendo o seu problema. você tem sorte com o convert que a saída do webkit no seu caso é realmente escalável e, portanto, você pode 'redimensionar' o pdf depois. para uma solução integrada eu suspeito que seria necessário algum tipo de nível de zoom e a largura da 'navegador'
akira
btw, qual é o formato de documento que você está usando para criar o ebook ou livro impresso (látex, xsl-fo .. etc?)
akira

Respostas:

9

Requisitos de Software

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

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

Etapas gerais

Aqui está como a solução funciona:

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

O script gera imagens com a mesma largura para arquivos de origem que contêm linhas com menos de 80 caracteres. Os arquivos de origem com linhas com mais de 80 caracteres resultam em imagens com a largura necessária para manter 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 possui um programa chamado convert.exe, que não pode substituir o convertcomando do Windows . Por esse motivo, o caminho completo para convert.exedeve ser codificado no arquivo em lotes (em vez de adicionar o ImageMagick ao PATH).

variáveis ​​ambientais

Defina a variável de ambiente 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 em lotes 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: #......; \(.*\)}$/\1 }/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 são bem-vindas.

Nota: A versão mais recente do wkhtmltoimage manipula corretamente a substituição da cor do plano de fundo. Portanto, a linha para remover o CSS para cores de segundo plano não é mais necessária, em teoria.

Dave Jarvis
fonte
3

lendo a página de manual de wkhtmltoimage:

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

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

akira
fonte
Esse é um erro de documentação, infelizmente. A dpiopção não está disponível na versão do Windows.
Dave Jarvis
@ Jarve Dave: ok. então ... continue e use o QtWebkit. .)
akira
Ou você pode instalar o Linux como VM (VirtualBox ou tal) e fazer a conversão lá ...
icyrock.com
0

Você também pode usar a linha de comando do Open Office para Html-> PDF:

http://www.oooninja.com/2008/02/batch-command-line-file-conversion-with.html

Shamit Verma
fonte
@Dave, com OO (OpenOffice), a solução seria: 1. Use alguma ferramenta para gerar arquivos HTML com destaque de sintaxe. 2. Converta HTML para PDF com OO. Como essas duas operações podem ser realizadas na linha de comando, deve ser fácil automatizar o processo para um número N de arquivos.
Shamit Verma
O OpenOffice realmente não é uma solução. É lento, com bugs, possui uma grande quantidade de sobrecarga (por exemplo, Java) e leva mais tempo para instalar do que wkhtmltoimage. Além disso, sua solução é teórica. Se você criar um arquivo em lotes de trabalho que reproduza exatamente os resultados src2png.batconforme indicado na resposta correta (com imagens de plano de fundo transparentes) e converta HTML em menos tempo do que o uso wkhtmltoimageenquanto é uma solução totalmente automática, recomendamos que você publique seus resultados como alternativa . Além disso, qual seria a vantagem de substituir o wkhtmltoimageOpenOffice?
31811 Dave