Converti HTML in immagine

sfondo

Converti vari file sorgente evidenziati dalla sintassi (C, SQL, Java, PHP, batch, bash) in immagini ad alta risoluzione (600 dpi), adatte per un eBook e un libro stampato.

Soluzioni fallite

Numerosi tentativi finora:

• OpenOffice o LibreOffice : devono reimportare il codice sorgente nel documento ogni volta che cambia il file sorgente. (Cioè, la soluzione non può essere facilmente automatizzata per centinaia o migliaia di file di origine.)
• enscript. Impossibile cambiare facilmente i colori, rende in modo imperfetto l'output, non completo.
• LyX / LaTeX. Rendering imperfetto dell'output.
• gvim in HTML - HTMLDOC in PostScript - GhostScript in PNG. HTMLDOC ignora i fonttag.
• gvim in HTML - html2ps - GhostScript in PNG. I colori RGB non sono riconosciuti da html2ps.
• Da Firefox a PostScript - Da GhostScript a PNG. Odiosamente tortuoso.
• gvim in HTML - OmniFormat per qualsiasi cosa. Versione gratuita non adatta per l'elaborazione in batch; molti pop-up pubblicitari.
• Pygments. Non è possibile modificare facilmente la risoluzione dell'immagine; non ha la gamma di combinazioni di colori di gvim.

La soluzione più vicina

La soluzione che quasi funziona è:

• gvim in HTML - wkhtmltopdf in PDF. Richiederà la post-elaborazione con ImageMagick ( wkhtmltoimage non può impostare la risoluzione dell'immagine, ma solo la larghezza della pagina).

Requisiti

• Windows e Linux, ma entrambi sono accettabili.
• Gratuito o OSS
• Solo riga di comando (adatto per l'elaborazione batch)
• Cambia facilmente la combinazione di colori
• Supporto: PHP, batch, bash, Java, JavaScript, R, C e SQL

Domanda

Altri modi per convertire il codice sorgente evidenziato in sintassi in un'immagine ad alta risoluzione (600 dpi)?

Grazie!

Requisiti software

I seguenti pacchetti software sono disponibili per i sistemi Windows e Linux e sono necessari per una soluzione completa e funzionante:

• gvim - Usato per esportare il codice sorgente evidenziato dalla sintassi in HTML.
• moria - Combinazione di colori per l'evidenziazione della sintassi.
• wkhtmltoimage - Usato per convertire documenti HTML in file PNG.
• gawk e sed - Strumenti per l'elaborazione del testo.
• ImageMagick : utilizzato per tagliare il PNG e aggiungere un bordo.

Passaggi generali

Ecco come funziona la soluzione:

1. Carica il codice sorgente in un editor che può aggiungere macchie di colore.
2. Esporta il codice sorgente come documento HTML (con FONTtag incorporati ).
3. Rimuovi l'attributo di sfondo dal documento HTML (per consentire la trasparenza).
4. Converti il ​​documento HTML in un file PNG.
5. Taglia il bordo del PNG.
6. Aggiungi un piccolo bordo di 25 pixel attorno all'immagine.
7. Elimina i file temporanei.

Lo script genera immagini della stessa larghezza per i file di origine contenenti righe di lunghezza inferiore a 80 caratteri. I file di origine con righe di lunghezza superiore a 80 caratteri generano immagini ampie quanto necessario per conservare l'intera riga.

Installazione

Installare i componenti nei seguenti percorsi:

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

Nota: ImageMagick ha un programma chiamato convert.exe, che non può sostituire il convertcomando di Windows . Per questo motivo, il percorso completo convert.exedeve essere codificato nel file batch (anziché aggiungere ImageMagick a PATH).

variabili ambientali

Impostare la variabile di ambiente PATH su:

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

File batch

Eseguilo usando:

src2png.bat src2png.bat

Creare un file batch chiamato src2png.batcopiando i seguenti contenuti:

@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*.

Miglioramenti e ottimizzazioni sono benvenuti.

Nota: l'ultima versione di wkhtmltoimage gestisce correttamente la sostituzione del colore di sfondo. Pertanto, la linea per rimuovere il CSS per i colori di sfondo non è più necessaria, in teoria.

leggendo la manpage di wkhtmltoimage:

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

se ciò non aiuta: hackerare insieme una soluzione semplice con Qt e (incluso) Webkit è piuttosto semplice.

Puoi anche usare Open Office per Html-> riga di comando del modulo di conversione PDF:

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