将 HTML 转换为图像

Question

背景

将各种语法高亮的源文件（C、SQL、Java、PHP、batch、bash）批量转换为高分辨率图像（600dpi），适用于电子书和印刷书籍。

失败的解决方案

到目前为止的一些尝试：

• OpenOffice或LibreOffice - 每次源文件更改时都必须将源代码重新导入到文档中。（也就是说，对于数百或数千个源文件，该解决方案无法轻松实现自动化。）
• 登记。不能轻易改变颜色，不完美地渲染输出，不全面。
• LyX/乳胶。不完美地呈现输出。
• gvim 到 HTML — HTMLDOC 到 PostScript — GhostScript 到 PNG。HTMLDOC 忽略font标签。
• gvim 转 HTML — html2ps — GhostScript 转 PNG。RGB 颜色无法识别html2ps。
• Firefox 到 PostScript — GhostScript 到 PNG。令人讨厌的迂回。
• gvim 到 HTML — OmniFormat 到任何东西。免费版不适合批量处理；很多广告弹出窗口。
• 色素。不能轻易改变图像分辨率；没有 gvim 的配色方案范围。

最近解

几乎有效的解决方案是：

• gvim 到 HTML — wkhtmltopdf 到 PDF。将需要使用 ImageMagick 进行后处理（wkhtmltoimage不能设置图像分辨率，只能设置页面宽度）。

要求

• Windows 和 Linux，但都可以接受。
• 免费或OSS
• 仅命令行（适用于批处理）
• 轻松更改配色方案
• 支持：PHP、批处理、bash、Java、JavaScript、R、C 和 SQL

题

将语法突出显示的源代码转换为高分辨率（600dpi）图像的任何其他方法？

谢谢！

Answer 1

软件要求

以下软件包可用于 Windows 和 Linux 系统，并且是完整、有效的解决方案所必需的：

• gvim - 用于将语法高亮显示的源代码导出为 HTML。
• moria - 语法高亮的配色方案。
• wkhtmltoimage - 用于将 HTML 文档转换为 PNG 文件。
• gawk和sed - 文本处理工具。
• ImageMagick - 用于修剪 PNG 并添加边框。

一般步骤

以下是解决方案的工作原理：

1. 将源代码加载到可以添加颜色飞溅的编辑器中。
2. 将源代码导出为 HTML 文档（带有嵌入的FONT标签）。
3. 从 HTML 文档中去除背景属性（以允许透明度）。
4. 将 HTML 文档转换为 PNG 文件。
5. 修剪 PNG 边框。
6. 在图像周围添加一个 25 像素的小边框。
7. 删除临时文件。

该脚本为包含长度都在 80 个字符以下的行的源文件生成宽度相同的图像。行超过 80 个字符的源文件会生成尽可能宽的图像以保留整行。

安装

将组件安装到以下位置：

• gvim -C:\Program Files\Vim
• 莫里亚——C:\Program Files\Vim\vim73\colors
• wkhtmltoimage -C:\Program Files\wkhtml
• ImageMagick -C:\Program Files\ImageMagick
• Gawk和Sed -C:\Program Files\GnuWin32

注意：ImageMagick 有一个名为 的程序convert.exe，它不能取代 Windowsconvert命令。因此，convert.exe必须在批处理文件中硬编码的完整路径（而不是将 ImageMagick 添加到PATH）。

环境变量

将 PATH环境变量设置为：

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

批处理文件

使用以下命令运行它：

src2png.bat src2png.bat

src2png.bat通过复制以下内容创建一个批处理文件：

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

欢迎改进和优化。

注意：最新版本的wkhtmltoimage正确处理覆盖背景颜色。因此，理论上不再需要删除背景颜色 CSS 的行。