Convertir HTML en image

22

Contexte

Conversion par lots de divers fichiers source à coloration syntaxique (C, SQL, Java, PHP, batch, bash) en images haute résolution (600 dpi), adaptés à un livre électronique et à un livre imprimé.

Solutions échouées

Un certain nombre de tentatives jusqu'à présent:

  • OpenOffice ou LibreOffice - Vous devez réimporter le code source dans le document chaque fois que le fichier source change. (Autrement dit, la solution ne peut pas être facilement automatisée pour des centaines ou des milliers de fichiers source.)
  • enscript. Ne peut pas changer facilement les couleurs, rend le rendu imparfaitement, pas complet.
  • LyX / LaTeX. Rend imparfaitement la sortie.
  • gvim en HTML - HTMLDOC en PostScript - GhostScript en PNG. HTMLDOC ignore les fontbalises.
  • gvim en HTML - html2ps - GhostScript en PNG. Les couleurs RVB ne sont pas reconnues par html2ps.
  • Firefox vers PostScript - GhostScript vers PNG. Désagréablement détourné.
  • gvim en HTML - OmniFormat pour tout. Version gratuite inadaptée au traitement par lots; beaucoup de pop-ups publicitaires.
  • pygments. Impossible de modifier facilement la résolution de l'image; n'a pas la gamme de couleurs de gvim.

Solution la plus proche

La solution qui fonctionne presque est:

  • gvim en HTML - wkhtmltopdf en PDF. Nécessite un post-traitement avec ImageMagick ( wkhtmltoimage ne peut pas définir la résolution de l'image, uniquement la largeur de la page).

Exigences

  • Windows et Linux, mais l'un ou l'autre est acceptable.
  • Gratuit ou OSS
  • Ligne de commande uniquement (adaptée au traitement par lots)
  • Changez facilement la palette de couleurs
  • Prise en charge: PHP, batch, bash, Java, JavaScript, R, C et SQL

Question

Y a-t-il d'autres façons de convertir le code source mis en évidence par la syntaxe en une image haute résolution (600 dpi)?

Merci!

Dave Jarvis
la source
@Dave Jarvis: pourquoi wkhtmltoimageet définir la largeur de la page ne suffit-il pas? la hauteur ne peut pas être spécifiée car elle est déterminée par le contenu du contenu html. la largeur à mon humble est tout ce dont vous avez réellement besoin, vous pouvez calculer la largeur nécessaire en fonction du nombre de pixels par pouce que vous souhaitez.
akira
@Dave Jarvis: eh bien, dites-moi juste combien de pouces vous voulez couvrir et je vous dis de combien de pixels vous aurez besoin. «rogner» le résultat avec convertir ensuite est une bonne idée mais détruit quelque peu l'idée de «dpi». vous commencez toujours par "j'ai besoin de remplir ce x pouce d'espace et je veux qu'il soit rempli de z points par pouce" .. et basé sur cette formule, vous demandez des pixels.
akira
@akira: la largeur dépend du nombre de colonnes utilisées par le code source. Parfois, la largeur sera de 75 caractères. Parfois, ce sera 40 caractères. Ainsi, 75 caractères devraient prendre environ 5,5 pouces et 40 caractères devraient être un peu plus de la moitié. La valeur 5,5 dépend des marges du livre, qui sont susceptibles de changer (une ou deux fois). C'est un calcul qui doit être fait automatiquement, soit dit en passant, sinon la solution ne peut pas être automatisée, ce qui va à l'encontre de l'objectif global.
Dave Jarvis
@Dave Jarvis: oui, je comprends votre problème. vous avez la chance de convertir que la sortie de webkit dans votre cas est vraiment évolutive et donc vous pouvez «redimensionner» le pdf après. pour une solution intégrée, je soupçonne que l'on aurait besoin d'une sorte de niveau de zoom ET de la largeur du «navigateur»
akira
btw, quel est le format de document que vous utilisez pour créer l'ebook ou le livre imprimé (latex, xsl-fo .. etc?)
akira

Réponses:

9

Logiciels requis

Les progiciels suivants sont disponibles pour les systèmes Windows et Linux et sont requis pour une solution complète et fonctionnelle:

  • gvim - Utilisé pour exporter le code source en surbrillance syntaxique vers HTML.
  • moria - Jeu de couleurs pour la coloration syntaxique.
  • wkhtmltoimage - Utilisé pour convertir des documents HTML en fichiers PNG.
  • gawk and sed - Outils de traitement de texte.
  • ImageMagick - Utilisé pour découper le PNG et ajouter une bordure.

Étapes générales

Voici comment fonctionne la solution:

  1. Chargez le code source dans un éditeur qui peut ajouter des touches de couleur.
  2. Exportez le code source en tant que document HTML (avec des FONTbalises intégrées ).
  3. Supprimez l'attribut d'arrière-plan du document HTML (pour permettre la transparence).
  4. Convertissez le document HTML en fichier PNG.
  5. Coupez la bordure PNG.
  6. Ajoutez une petite bordure de 25 pixels autour de l'image.
  7. Supprimez les fichiers temporaires.

Le script génère des images de même largeur pour les fichiers source contenant des lignes de moins de 80 caractères. Les fichiers source avec des lignes de plus de 80 caractères donnent des images aussi larges que nécessaire pour conserver la ligne entière.

Installation

Installez les composants dans les emplacements suivants:

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

Remarque: ImageMagick a un programme appelé convert.exe, qui ne peut pas remplacer la convertcommande Windows . Pour cette raison, le chemin complet de convert.exedoit être codé en dur dans le fichier de commandes (par opposition à l'ajout d'ImageMagick à PATH).

Variables d'environnement

Définissez la variable d'environnement PATH sur:

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

Fichier batch

Exécutez-le en utilisant:

src2png.bat src2png.bat

Créez un fichier de commandes appelé src2png.baten copiant le contenu suivant:

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

Améliorations et optimisations bienvenues.

Remarque: La dernière version de wkhtmltoimage gère correctement la substitution de la couleur d'arrière-plan. Ainsi, la ligne pour supprimer le CSS pour les couleurs d'arrière-plan n'est plus nécessaire, en théorie.

Dave Jarvis
la source
3

lire la page de manuel de wkhtmltoimage:

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

si cela ne vous aide pas: pirater ensemble une solution simple avec Qt et (le inclus) Webkit est assez simple.

akira
la source
C'est malheureusement une erreur de documentation. L' dpioption n'est pas disponible avec la version Windows.
Dave Jarvis
@Dave Jarvis: ok. alors ... continuez et utilisez QtWebkit. .)
akira
Ou vous pouvez installer Linux en tant que VM (VirtualBox ou autre) et y effectuer la conversion ...
icyrock.com
0

Vous pouvez également utiliser Open Office pour Html-> ligne de commande du formulaire de conversion PDF:

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

Shamit Verma
la source
@Dave, Avec OO (OpenOffice), la solution serait: 1. Utilisez un outil pour générer des fichiers HTML avec une coloration syntaxique. 2. Convertissez HTML en PDF avec OO. Étant donné que ces deux opérations peuvent être effectuées à partir de la ligne de commande, il devrait être facile d'automatiser le processus pour N nombre de fichiers.
Shamit Verma
OpenOffice n'est vraiment pas une solution. Il est lent, bogué, a une grande quantité de surcharge (c'est-à-dire Java) et prend plus de temps à installer que wkhtmltoimage. De plus, votre solution est théorique. Si vous créez un travail fichier batch qui reproduit exactement les résultats de src2png.batdonnée dans la réponse correcte (avec des images d'arrière - plan transparent) et convertit HTML en moins de temps que l' utilisation , wkhtmltoimagetout en étant une solution entièrement automatique, je vous encourage à poster vos résultats comme une alternative . De plus, quel serait l'avantage de remplacer wkhtmltoimagepar OpenOffice?
Dave Jarvis