การทำ Website Thumbnail ด้วยตัวเอง

หลายๆคนคงสังเกตเห็นผมเอา Snap.com ติดมาที่ Scriptdd
มันเป็น javascript ที่ทำงานแบบ Ajax กลับไปติดต่อกับ Server ของ Snap.com
เพื่อสร้างรูปหน้า Website ใน Link ต่อไป เป็น Thumbnail เล็กๆ

ก็เพิ่มความน่าสนใจให้กับ Website กันไปล่ะครับ
ปัญหาคือแค่เอามาติดคงไม่เท่าไร แต่นิสัยของผมคงจะมีคำถามต่อมาว่า

แล้วเขาทำยังไง ?? เรื่องของเรื่องมาจาก สมาชิก Scriptdd นี่แหล่ะครับ
ตั้งโจทย์มาถามผมว่าจะทำยังไง ไอ้ครั้นตอบไปผ่าน Email คงไม่ได้กระจายความรู้ดีกว่า

จากที่ค้นหาใน Google นั้น ผมพบว่าการสร้าง Website Thumbnail เฉพาะส่วนการจับภาพหน้าจอนั้น
มีวิธีการไม่ต่างกับการ Browse Web ด้วย Web Browser ตามปกติเลยครับ

1. สำหรับท่านที่จะใช้งานบน WINDOWS SERVER

ชีวิตท่านจะง่ายดายโคตรๆ เพราะท่านจะเอาตัวเองไปผูกกับ IE Engine ครับ ^^ ด้วย IECapt 
 


http://iecapt.sourceforge.net/

IECapt คือ program ที่ทำงานบน commandline ในลักษณะระบุ parameter เป็น URL แล้ว
มันจะทำหน้าที่จับภาพหน้าจอ Website นั้นๆด้วย IE Engine (Windows ลง IE ไว้อยู่แล้ว)
ออกมาเป็นรูปภาพให้เราตามต้องการ Download มาแล้วแตก Zip จะได้ 

IECapt.exe ออกมา

ให้ไปเพิ่ม Path ใน System ด้วยนะครับให้ IECapt สามารถเรียกใช้งานได้ทุกๆตำแหน่ง
หรือง่ายๆก็ Copy IECapt.exe ไปใส่ไว้ใน C:WINDOWS เลยก็ได้ครับ

เสร็จแล้วลองเรียก PHP Script นี้ทำงานดูครับ

<?
$url                   =    "http://www.scriptdd.com/";
$filename        =    "c:tempscriptdd.jpg";
system("IECapt.exe $url $filename");
?> 

PHP Script นี้จะเรียก system โดยไปเรียก IECapt.exe ให้ไปจับภาพหน้าจอ 
http://www.scriptdd.com ออกมา Save เป็น File ตามที่เราระบุเอาไว้
ตัว IECapt สำมารถ Save เป็น jpg หรือ png ก็ได้นะครับเลือกเอาตามใจชอบ

แต่เนื่องด้วยการใช้งานจริงนั้น IE ไม่ใช่ Webbrowser เดียวในโลก การผูกขาดอยู่
กับ Microsoft ไม่ใช่เรื่องที่ถูกต้อง เพื่อไม่ให้น้อยหน้าชาว Linux 
ผมขอเสนอวิธีที่สองครับ

2. สำหรับชาว LINUX ครับ (จริงๆ WINDOWS ก็ใช้ได้ลองมาแล้ว) ด้วย PEARL CRESCENT PAGE SAVER

 
http://pearlcrescent.com/products/pagesaver/

มันคือ extension สำหรับ Firefox ที่ช่วยจับภาพหน้าจอให้ แน่นอนด้วยความที่มันคือ Firefox ฉะนั้น มันจะสามารถตามไปอยู่ใน
Linux, Windows, Mac (อันนี้ผมยังไม่ได้ Test ใคร test แล้วช่วยยืนยันด้วย)

ผมติดตั้งตัว Install Page Saver Basic 

ตัวอย่างผมใช้ Ubuntu 6.10 Desktop ทดสอบนะครับ โดยใช้ Firefox 2.0.0.3

สำหรับท่านใดจะใช้งานบน Linux Server แท้ๆ การติดตั้ง extension ให้กับ Firefox สามารถทำผ่าน commandline ได้ด้วยคำสั่ง

firefox -install-global-extension "/path/to/the/extension-file.xpi"

เปลี่ยน path ที่ download extension มาให้ถูกต้องนะครับ

ลองทดสอบโลดครับ

<?
$url        =    "http://www.scriptdd.com/";
system("firefox -savepng $url");
?> 

Script จะทำการเปิด Firefox เรียก URL ดังกล่าว Load หน้าจอจนเสร็จ
แล้วปิดตัวเอง

และก็จะได้รูปออกมา Save ได้ที่ตำแหน่ง Download ของ Firefox 
อย่างผมจะตั้งไว้ที่ Desktop 

ตัว extension ระบุว่าสามารถ Save เป็นทั้ง jpg และ png 
แต่ผมทดสอบดูมันได้แต่ png หว่า ยังไงใครเอาไปดัดแปลงลองเช็คดูนะครับ

สรุป

จากที่กล่าวมาทั้งหมดผมคงสร้างแนวคิดได้แล้วว่าการจับภาพหน้าจอ Website คงไม่ใช่เรื่องยากแล้ว

ต่อไปถ้าคิดจะนำไปพัฒนาต่อ คงเป็นเรื่อง การ Crop รูป การ Resize รูป
การทำ Javascript CSS Ajax เพื่อรับตรวจสอบ Link ต่างๆ อันนี้คงเป็นเรื่องยากต่อไป

อีกเรื่องคุณควรติดตั้ง plugin ต่างๆของ Web Browser ที่จะใช้งานให้ครบถ้วนด้วยนะครับ
ไม่ว่าจะเป็น Java หรือ Flash เพื่อให้ทั้ง IE และ Firefox Engine สามารถแสดงผลได้ถูกต้อง

อ้างอิง

http://www.scriptdd.com/webtip/how-to-website-thumbnail-generator.html
http://iecapt.sourceforge.net/
http://pearlcrescent.com/products/pagesaver/
http://www.zubrag.com/scripts/website-thumbnail-generator.php
http://www.zubrag.com/forum/index.php/topic,82.0.html