web-dev-qa-db-ja.com

HTMLを画像に変換する

バックグラウンド

構文で強調表示されているさまざまなソースファイル（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からHTML — OmniFormatから何でも。バッチ処理には適さない無料バージョン。たくさんの広告ポップアップ。
  • pygments。画像の解像度を簡単に変更することはできません。 gvimの配色の範囲はありません。

最も近いソリューション

ほとんど機能する解決策は次のとおりです。

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

要件

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

質問

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

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

gvimsyntax-highlightingimagemagickghostscript
22
Dave Jarvis

ソフトウェア要件

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

  • gvim -構文で強調表示されたソースコードをHTMLにエクスポートするために使用されます。
  • moria -構文を強調表示するための配色。
  • wkhtmltoimage -HTMLドキュメントをPNGファイルに変換するために使用されます。
  • gawk および sed -テキスト処理ツール。
  • ImageMagick -PNGをトリミングし、境界線を追加するために使用されます。

一般的な手順

ソリューションの仕組みは次のとおりです。

  1. 色のスプラッシュを追加できるエディターにソースコードをロードします。
  2. ソースコードをHTMLドキュメントとしてエクスポートします（FONTタグが埋め込まれています）。
  3. HTMLドキュメントからbackground属性を削除します（透明性を確保するため）。
  4. HTMLドキュメントをPNGファイルに変換します。
  5. PNGの境界線をトリミングします。
  6. 画像の周囲に25ピクセルの小さな境界線を追加します。
  7. 一時ファイルを削除します。

このスクリプトは、長さがすべて80文字未満の行を含むソースファイルに対して、すべて同じ幅の画像を生成します。行が80文字を超えるソースファイルは、行全体を保持するために必要な幅の画像になります。

Installation

コンポーネントを次の場所にインストールします。

  • gvim-C:\Program Files\Vim
  • moria-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というプログラムがあり、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を削除する行は不要になります。

9
Dave Jarvis

wkhtmltoimage のマンページを読む：

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

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

3
akira

Open Office forHtmlを使用することもできます-> PDFコマンドラインからの変換：

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

0
Shamit Verma