Konversi HTML ke gambar

22

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!

Dave Jarvis
sumber
@ Dave Jarvis: mengapa wkhtmltoimagedan mengatur lebar halaman tidak cukup? tingginya tidak dapat ditentukan karena ditentukan oleh konten barang html. lebar imho adalah yang Anda butuhkan, Anda dapat menghitung lebar yang dibutuhkan berdasarkan berapa banyak piksel per inci yang Anda inginkan.
akira
@ Dave Jarvis: baik, katakan saja berapa inci yang ingin Anda tutupi dan saya beri tahu Anda berapa banyak piksel yang Anda perlukan. 'memangkas' hasilnya dengan mengonversi sesudahnya adalah ide yang bagus tetapi agak menghancurkan gagasan 'dpi'. Anda selalu mulai dengan "saya harus mengisi ruang x inci ini dan saya ingin itu diisi dengan z titik per inci" .. dan berdasarkan pada rumus itu Anda meminta piksel.
akira
@ akira: Lebar tergantung pada jumlah kolom yang digunakan kode sumber. Terkadang lebarnya adalah 75 karakter. Terkadang 40 karakter. Jadi 75 karakter harus memakan waktu sekitar 5,5 inci dan 40 karakter harus sedikit lebih dari setengahnya. Nilai 5,5 tergantung pada margin buku, yang dapat berubah (sekali atau dua kali). Ini adalah perhitungan yang perlu dilakukan secara otomatis, jika tidak, solusinya tidak dapat otomatis, yang mengalahkan seluruh tujuan.
Dave Jarvis
@ Dave Jarvis: ya, saya mengerti masalah Anda. Anda beruntung dengan konversi bahwa output dari webkit dalam kasus Anda benar-benar dapat diukur dan dengan demikian Anda dapat 'mengubah ukuran' pdf sesudahnya. untuk solusi terintegrasi saya kira seseorang akan memerlukan semacam tingkat zoom DAN lebar 'peramban'
akira
btw, apa format dokumen yang Anda gunakan untuk membuat ebook atau buku cetak (lateks, xsl-fo .. dll?)
akira

Jawaban:

9

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.

Dave Jarvis
sumber
3

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.

akira
sumber
Sayangnya, itu adalah kesalahan dokumentasi. The dpiopsi ini tidak tersedia dengan versi Windows.
Dave Jarvis
@ Dave Jarvis: ok. lalu ... lanjutkan dan gunakan QtWebkit. .)
akira
Atau Anda dapat menginstal Linux sebagai VM (VirtualBox atau semacamnya) dan melakukan konversi di sana ...
icyrock.com
0

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

Shamit Verma
sumber
@Dave, Dengan OO (OpenOffice), solusinya adalah: 1. Gunakan beberapa alat untuk menghasilkan file HTML yang memiliki highlight sintaks. 2. Konversi HTML ke PDF dengan OO. Karena kedua operasi ini dapat dilakukan dari baris perintah, seharusnya mudah untuk mengotomatiskan proses untuk jumlah file N.
Shamit Verma
OpenOffice sebenarnya bukan solusi. Itu lambat, kereta, memiliki sejumlah besar overhead (yaitu, Java), dan membutuhkan waktu lebih lama untuk menginstal daripada wkhtmltoimage. Juga, solusi Anda bersifat teoritis. Jika Anda membuat file kumpulan kerja yang mereproduksi persis hasil src2png.batseperti yang diberikan dalam jawaban yang benar (dengan gambar latar transparan) dan mengonversi HTML dalam waktu yang lebih singkat daripada menggunakan wkhtmltoimagesaat menjadi solusi yang sepenuhnya otomatis, saya mendorong Anda untuk memposting hasil Anda sebagai alternatif . Juga, apa keuntungan dari penggantian wkhtmltoimagedengan OpenOffice?
Dave Jarvis