Konversi HTML ke gambar

Latar Belakang

Batch mengonversi berbagai file sumber yang disorot sintaksis (C, SQL, Java, PHP, batch, bash) menjadi gambar beresolusi tinggi (600dpi), cocok untuk eBook dan buku cetak.

Solusi yang Gagal

Sejumlah upaya sejauh ini:

• OpenOffice atau LibreOffice - Harus mengimpor kembali kode sumber ke dalam dokumen setiap kali file sumber berubah. (Yaitu, solusinya tidak dapat dengan mudah diotomatiskan untuk ratusan atau ribuan file sumber.)
• enskrip. Tidak dapat dengan mudah mengubah warna, menghasilkan output secara tidak sempurna, tidak komprehensif.
• LyX / LaTeX. Merender output secara tidak sempurna.
• gvim ke HTML - HTMLDOC ke PostScript - GhostScript to PNG. HTMLDOC mengabaikan fonttag.
• gvim ke HTML - html2ps - GhostScript to PNG. Warna RGB tidak dikenali oleh html2ps.
• Firefox ke PostScript - GhostScript ke PNG. Sangat menjengkelkan.
• gvim to HTML - OmniFormat untuk apa pun. Versi gratis tidak cocok untuk pemrosesan batch; banyak pop-up iklan.
• pigmen. Tidak dapat dengan mudah mengubah resolusi gambar; tidak memiliki rentang skema warna gvim.

Solusi Terdekat

Solusi yang hampir berhasil adalah:

• gvim ke HTML - wkhtmltopdf ke PDF. Akan membutuhkan pasca pemrosesan dengan ImageMagick ( wkhtmltoimage tidak dapat mengatur resolusi gambar, hanya lebar halaman).

Persyaratan

• Windows dan Linux, tetapi keduanya dapat diterima.
• Gratis atau OSS
• Hanya baris perintah (cocok untuk pemrosesan batch)
• Mengubah skema warna dengan mudah
• Dukungan: PHP, batch, bash, Java, JavaScript, R, C, dan SQL

Pertanyaan

Adakah cara lain untuk mengonversi kode sumber yang disorot sintaksis ke gambar beresolusi tinggi (600dpi)?

Terima kasih!

Persyaratan Perangkat Lunak

Paket perangkat lunak berikut tersedia untuk sistem Windows dan Linux, dan diperlukan untuk solusi yang lengkap dan berfungsi:

• gvim - Digunakan untuk mengekspor sintaks yang disorot kode sumber ke HTML.
• moria - Skema warna untuk penyorotan sintaksis.
• wkhtmltoimage - Digunakan untuk mengonversi dokumen HTML ke file PNG.
• gawk and sed - Alat pengolah teks.
• ImageMagick - Digunakan untuk memotong PNG dan menambahkan perbatasan.

Langkah Umum

Inilah cara solusinya:

1. Masukkan kode sumber ke editor yang dapat menambahkan percikan warna.
2. Ekspor kode sumber sebagai dokumen HTML (dengan FONTtag yang disematkan ).
3. Keluarkan atribut latar belakang dari dokumen HTML (untuk memungkinkan transparansi).
4. Konversi dokumen HTML ke file PNG.
5. Potong perbatasan PNG.
6. Tambahkan batas 25 piksel kecil di sekitar gambar.
7. Hapus file sementara.

Script menghasilkan gambar dengan lebar yang sama untuk file sumber yang berisi baris yang panjangnya di bawah 80 karakter. Sumber file dengan garis lebih dari 80 karakter menghasilkan gambar selebar yang diperlukan untuk mempertahankan seluruh baris.

Instalasi

Pasang komponen ke lokasi berikut:

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

Catatan: ImageMagick memiliki program yang disebut convert.exe, yang tidak dapat menggantikan convertperintah Windows . Karena itu, path lengkap convert.exeharus hard-coded di file batch (sebagai lawan menambahkan ImageMagick ke PATH).

Variabel Lingkungan

Setel variabel lingkungan PATH ke:

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

File Batch

Jalankan menggunakan:

src2png.bat src2png.bat

Buat file batch yang dipanggil src2png.batdengan menyalin konten berikut:

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

Perbaikan dan optimalisasi disambut baik.

Catatan: Versi terbaru wkhtmltoimage dengan benar menangani mengesampingkan warna latar belakang. Dengan demikian, garis untuk menghapus CSS untuk warna latar belakang tidak lagi diperlukan, secara teori.

membaca halaman manual dari wkhtmltoimage:

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

jika itu tidak membantu: meretas solusi sederhana dengan Qt dan (termasuk) Webkit cukup mudah.

Anda juga dapat menggunakan Open Office untuk Html-> baris perintah formulir konversi PDF:

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