HTMLを画像に変換

22

バックグラウンド

さまざまな構文強調表示されたソースファイル（C、SQL、Java、PHP、バッチ、bash）を、電子書籍や印刷本に適した高解像度の画像（600dpi）にバッチ変換します。

失敗したソリューション

これまでの試行回数：

  • OpenOfficeまたはLibreOffice-ソースファイルが変更されるたびに、ソースコードをドキュメントに再インポートする必要があります。（つまり、数百または数千のソースファイルに対してソリューションを簡単に自動化することはできません。）
  • enscript。色を簡単に変更できず、出力を完全にレンダリングするのではなく、包括的にレンダリングします
  • LyX / LaTeX。出力を不完全にレンダリングします。
  • gvimからHTML — HTMLDOCからPostScript — GhostScriptからPNG。HTMLDOCはfontタグを無視します。
  • gvimからHTML — html2ps — GhostScriptからPNG。RGBカラーはによって認識されませんhtml2ps。
  • FirefoxからPostScript — GhostScriptからPNG。明白に遠回り。
  • gvim to HTML —あらゆるものにOmniFormat。バッチ処理に適さない無料版。広告ポップアップがたくさん。
  • pygments。画像の解像度を簡単に変更することはできません。gvimのカラースキームの範囲はありません。

最も近いソリューション

ほとんど機能するソリューションは次のとおりです。

  • gvimからHTML — wkhtmltopdfからPDF。ImageMagickを使用した後処理が必要になります（wkhtmltoimageは画像の解像度を設定できません。ページ幅のみを設定できます）。

必要条件

  • WindowsとLinuxですが、どちらでもかまいません。
  • 無料またはOSS
  • コマンドラインのみ（バッチ処理に適しています）
  • 配色を簡単に変更
  • サポート：PHP、バッチ、bash、Java、JavaScript、R、C、およびSQL

質問

構文強調表示されたソースコードを高解像度（600dpi）の画像に変換する他の方法はありますか？

ありがとうございました！

gvim  syntax-highlighting  imagemagick  ghostscript 
— デイブ・ジャービス
ソース
@Dave Jarvis：なぜwkhtmltoimageページの幅を設定するだけでは不十分なのですか？高さはhtmlの内容によって決定されるため、指定できません。実際に必要なのはimho幅だけです。1インチあたりのピクセル数に基づいて、必要な幅を計算できます。
— アキラ
@Dave Jarvis：まあ、どれだけカバーしたいのかを教えてください。必要なピクセル数を教えてください。後でconvertで結果を「トリミング」するのは良い考えですが、「dpi」の考えをいくらか破壊します。常に「このxインチのスペースを埋める必要があり、1インチあたりzドットで埋めたい」から始まり、その式に基づいてピクセルを要求します。
— アキラ
@akira：幅は、ソースコードが使用する列の数に依存します。幅は75文字になることがあります。40文字になることもあります。したがって、75文字は約5.5インチを占め、40文字はその半分をわずかに超えるはずです。5.5の値は、変更される可能性のある本のマージンに依存します（1回または2回）。ちなみに、これは自動的に行われる必要がある計算です。そうしないと、ソリューションを自動化できず、全体の目的が失われます。
— デイブジャービス
@デイブジャービス：うん、私はあなたの問題を理解しています。あなたの場合のWebkitの出力は本当にスケーラブルであり、したがってPDFを後で「サイズ変更」することができるので、あなたはconvertで幸運です。私は1つのズームレベルAND「ブラウザ」の幅のいくつかの種類が必要だ疑いが統合されたソリューションのための
— アキラ
ところで、あなたは電子ブックまたは印刷された本（？ラテックス、XSL-FO ...など）を作成するために使用されているドキュメント形式何である
— アキラ

回答:

9

ソフトウェア要件

次のソフトウェアパッケージは、WindowsシステムとLinuxシステムの両方で使用でき、完全で実用的なソリューションに必要です。

  • gvim-構文で強調表示されたソースコードをHTMLにエクスポートするために使用されます。
  • moria-構文の強調表示のための配色。
  • wkhtmltoimage -HTMLドキュメントをPNGファイルに変換するために使用されます。
  • gawk and 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のとセッド -C:\Program Files\GnuWin32

注：ImageMagickにはconvert.exe、Windows convertコマンドを置き換えることができないというプログラムがあります。このため、への完全なパスを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を削除する行は不要になりました。

— デイブ・ジャービス
ソース
3

のマンページを読むwkhtmltoimage：

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

それでも解決しない場合：Qtと（含まれている）Webkitを使用して単純なソリューションをハッキングするのは簡単です。

— あきら
ソース
残念ながら、これはドキュメントの誤りです。このdpiオプションは、Windowsバージョンでは使用できません。
— デイブジャービス
@デイブ・ジャービス：わかりました。次に... QtWebkitを使用します。。）
— アキラ
それとも、VM（VirtualBoxのか、など）としてLinuxをインストールして、そこに変換を行うことができます...
— icyrock.com
0

Open Office for Html-> PDF変換フォームのコマンドラインを使用することもできます。

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

— シャミットバーマ
ソース
@ Dave、OO（OpenOffice）を使用する場合の解決策は次のとおりです。1.何らかのツールを使用して、構文が強調表示されたHTMLファイルを生成します。2. OOでHTMLをPDFに変換します。これらの操作は両方ともコマンドラインから実行できるため、N個のファイルのプロセスを簡単に自動化できるはずです。
— シャミットバーマ
OpenOfficeは本当に解決策ではありません。遅く、バグがあり、膨大なオーバーヘッド（つまりJava）があり、インストールに時間がかかりますwkhtmltoimage。また、ソリューションは理論的です。正解（透明な背景画像）で与えられた結果を正確に再現し、完全に自動化されたソリューションを使用するよりも短い時間でHTMLを変換する作業バッチファイルを作成する場合は、代替として結果を投稿することをお勧めします。また、OpenOffice に置き換えることの利点は何でしょうか？src2png.batwkhtmltoimagewkhtmltoimage
— デイブジャービス
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.