Convertir HTML a imagen

22

Fondo

Convierta por lotes varios archivos de origen resaltados de sintaxis (C, SQL, Java, PHP, lote, bash) en imágenes de alta resolución (600 ppp), adecuadas para un libro electrónico y un libro impreso.

Soluciones fallidas

Varios intentos hasta ahora:

  • OpenOffice o LibreOffice : tiene que volver a importar el código fuente en el documento cada vez que cambia el archivo fuente. (Es decir, la solución no puede automatizarse fácilmente para cientos o miles de archivos fuente).
  • enscript. No puede cambiar fácilmente los colores, representa la salida de forma imperfecta, no es completa.
  • LyX / LaTeX. Renderiza imperfectamente la salida.
  • gvim a HTML - HTMLDOC a PostScript - GhostScript a PNG. HTMLDOC ignora las fontetiquetas.
  • gvim a HTML - html2ps - GhostScript a PNG. Los colores RGB no son reconocidos por html2ps.
  • Firefox a PostScript - GhostScript a PNG. Desagradablemente tortuoso.
  • gvim a HTML - OmniFormat a cualquier cosa. Versión gratuita no apta para procesamiento por lotes; muchas ventanas emergentes de publicidad.
  • pigmentos No se puede cambiar fácilmente la resolución de la imagen; no tiene la gama de esquemas de color de gvim.

Solución más cercana

La solución que casi funciona es:

  • gvim a HTML - wkhtmltopdf a PDF. Requerirá un procesamiento posterior con ImageMagick ( wkhtmltoimage no puede establecer la resolución de la imagen, solo el ancho de la página).

Requisitos

  • Windows y Linux, pero cualquiera de ellos es aceptable.
  • Gratis u OSS
  • Solo línea de comando (adecuado para procesamiento por lotes)
  • Cambie fácilmente el esquema de color
  • Soporte: PHP, lote, bash, Java, JavaScript, R, C y SQL

Pregunta

¿Alguna otra forma de convertir el código fuente resaltado de sintaxis en una imagen de alta resolución (600 ppp)?

¡Gracias!

Dave Jarvis
fuente
@Dave Jarvis: ¿por qué wkhtmltoimagey establecer el ancho de la página no es suficiente? la altura no se puede especificar ya que está determinada por el contenido del contenido html. En realidad, todo lo que realmente necesita es ancho, puede calcular el ancho necesario en función de la cantidad de píxeles por pulgada que desee.
akira el
@Dave Jarvis: bueno, solo dime cuántos centímetros quieres cubrir y te digo cuántos píxeles necesitarás. 'recortar' el resultado con convertir luego es una buena idea, pero destruye un poco la idea de 'ppp'. siempre comienza con "necesito llenar esta x pulgada de espacio y quiero que se llene con z puntos por pulgada" ... y según esa fórmula, solicita píxeles.
akira el
@akira: el ancho depende del número de columnas que utiliza el código fuente. A veces el ancho será de 75 caracteres. A veces serán 40 caracteres. Entonces, 75 caracteres deberían ocupar aproximadamente 5,5 pulgadas y 40 caracteres deberían ser un poco más de la mitad. El valor 5.5 depende de los márgenes del libro, que están sujetos a cambios (una o dos veces). Este es un cálculo que debe hacerse automáticamente, por cierto, de lo contrario la solución no se puede automatizar, lo que frustra el propósito completo.
Dave Jarvis el
@ Dave Jarvis: sí, entiendo tu problema. tiene la suerte de convertir que la salida de webkit en su caso es realmente escalable y, por lo tanto, podría 'redimensionar' el pdf después. para una solución integrada, sospecho que uno necesitaría algún tipo de nivel de zoom Y el ancho del 'navegador'
akira
Por cierto, ¿cuál es el formato de documento que está utilizando para crear el libro electrónico o el libro impreso (látex, XSL-FO .. etc?)
Akira

Respuestas:

9

Requisitos de Software

Los siguientes paquetes de software están disponibles para sistemas Windows y Linux, y son necesarios para una solución completa y funcional:

  • gvim : se utiliza para exportar el código fuente resaltado de sintaxis a HTML.
  • moria : esquema de color para resaltado de sintaxis.
  • wkhtmltoimage : se utiliza para convertir documentos HTML en archivos PNG.
  • gawk and sed : herramientas de procesamiento de texto.
  • ImageMagick : se utiliza para recortar el PNG y agregar un borde.

Pasos generales

Así es como funciona la solución:

  1. Cargue el código fuente en un editor que pueda agregar salpicaduras de color.
  2. Exporte el código fuente como un documento HTML (con FONTetiquetas incrustadas ).
  3. Pele el atributo de fondo del documento HTML (para permitir la transparencia).
  4. Convierta el documento HTML en un archivo PNG.
  5. Recorte el borde PNG.
  6. Agregue un pequeño borde de 25 píxeles alrededor de la imagen.
  7. Eliminar archivos temporales.

El script genera imágenes que tienen el mismo ancho para los archivos de origen que contienen líneas que tienen menos de 80 caracteres de longitud. Los archivos de origen con líneas de más de 80 caracteres de largo dan como resultado imágenes tan anchas como sea necesario para retener toda la línea.

Instalación

Instale los componentes en las siguientes ubicaciones:

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

Nota: ImageMagick tiene un programa llamado convert.exe, que no puede reemplazar el convertcomando de Windows . Debido a esto, la ruta completa convert.exedebe estar codificada en el archivo por lotes (en lugar de agregar ImageMagick a PATH).

Variables de entorno

Establezca la variable de entorno PATH en:

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

Archivo por lotes

Ejecútelo usando:

src2png.bat src2png.bat

Cree un archivo src2png.batpor lotes llamado copiando los siguientes contenidos:

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

Mejoras y optimizaciones bienvenidas.

Nota: La última versión de wkhtmltoimage maneja correctamente la anulación del color de fondo. Por lo tanto, la línea para eliminar el CSS para los colores de fondo ya no es necesaria, en teoría.

Dave Jarvis
fuente
3

leyendo la página de manual de wkhtmltoimage:

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

si eso no ayuda: piratear una solución simple con Qt y (el incluido) Webkit es bastante sencillo.

akira
fuente
Eso es un error de documentación, desafortunadamente. La dpiopción no está disponible con la versión de Windows.
Dave Jarvis el
@ Dave Jarvis: ok. entonces ... continúa y usa QtWebkit. .)
akira el
O puede instalar Linux como VM (VirtualBox o
similar
0

También puede usar Open Office para la línea de comando del formulario de conversión Html-> PDF:

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

Shamit Verma
fuente
@Dave, con OO (OpenOffice), la solución sería: 1. Usar alguna herramienta para generar archivos HTML que tengan resaltado de sintaxis. 2. Convierta HTML a PDF con OO. Dado que ambas operaciones se pueden realizar desde la línea de comandos, debería ser fácil automatizar el proceso para N número de archivos.
Shamit Verma
OpenOffice realmente no es una solución. Es lento, tiene errores, tiene una gran cantidad de sobrecarga (es decir, Java) y tarda más en instalarse que wkhtmltoimage. Además, su solución es teórica. Si crea un archivo por lotes de trabajo que reproduce exactamente los resultados de src2png.batla respuesta correcta (con imágenes de fondo transparentes) y convierte HTML en menos tiempo que el uso wkhtmltoimagemientras es una solución totalmente automática, le animo a publicar sus resultados como una alternativa . Además, ¿cuál sería la ventaja de reemplazar wkhtmltoimagecon OpenOffice?
Dave Jarvis