แปลง HTML เป็นรูปภาพ

พื้นหลัง

Batch แปลงไฟล์ต้นฉบับที่เน้นไวยากรณ์ (C, SQL, Java, PHP, batch, bash) เป็นภาพความละเอียดสูง (600dpi) เหมาะสำหรับ eBook และหนังสือที่พิมพ์

แนวทางแก้ไขล้มเหลว

จำนวนครั้งที่พยายาม:

• 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, แบทช์, ทุบตี, Java, JavaScript, R, C และ SQL

คำถาม

มีวิธีอื่นใดในการแปลงซอร์สโค้ดที่เน้นไวยากรณ์เป็นภาพความละเอียดสูง (600dpi)?

ขอขอบคุณ!

ข้อกำหนดซอฟต์แวร์

แพคเกจซอฟต์แวร์ต่อไปนี้มีให้สำหรับทั้งระบบ 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 and Sed -C:\Program Files\GnuWin32

หมายเหตุ: ImageMagick มีโปรแกรมที่เรียกว่าconvert.exeซึ่งไม่สามารถแทนที่convertคำสั่งWindows ด้วยเหตุนี้เส้นทางแบบเต็มจะ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 สำหรับสีพื้นหลังนั้นไม่จำเป็นอีกต่อไป

อ่าน manpage ของwkhtmltoimage:

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

ถ้านั่นไม่ได้ช่วย: การแฮ็ควิธีแก้ปัญหาอย่างง่ายด้วย Qt และ (รวมอยู่ด้วย) Webkit นั้นค่อนข้างตรงไปตรงมา

คุณยังสามารถใช้ Open Office สำหรับบรรทัดคำสั่งรูปแบบการแปลง Html-> PDF:

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