☰

将 HTML 转换为图像

tag-icon • tag-icon gvim syntax-highlighting imagemagick ghostscript
将 HTML 转换为图像

背景

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

失败的解决方案

迄今为止已进行多次尝试：

  • 开发办公室或者自由办公室- 每次源文件更改时，都必须将源代码重新导入文档。（也就是说，对于数百或数千个源文件，该解决方案无法轻松实现自动化。）
  • 錄寫。无法轻松改变颜色，输出​​呈现不完美，不全面。
  • LyX/LaTeX。输出呈现不完美。
  • 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 进行后期处理（图像处理软件无法设置图像分辨率，只能设置页面宽度）。

要求

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

问题

还有其他方法可以将语法高亮的源代码转换为高分辨率（600dpi）图像吗？

谢谢你！

答案1

软件要求

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

常规步骤

该解决方案的工作原理如下：

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

对于每行长度不超过 80 个字符的源文件，该脚本会生成宽度相同的图像。如果源文件的行长度超过 80 个字符，则生成的图像宽度足以保留整行。

安装

将组件安装到以下位置：

  • 格维姆-C:\Program Files\Vim
  • 莫里亚-C:\Program Files\Vim\vim73\colors
  • 图像处理软件-C:\Program Files\wkhtml
  • 图像魔术师-C:\Program Files\ImageMagick
  • 呆呆和塞德-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*.

欢迎改进和优化。

注意：最新版本图像处理软件正确处理覆盖背景颜色。因此，从理论上讲，删除背景颜色的 CSS 行不再是必要的。

答案2

阅读手册页wkhtmltoimage：

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

如果这没有帮助：使用 Qt 和（包含的）Webkit 一起构建一个简单的解决方案非常简单。

相关内容