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

หัวข้อ บทความ แทก HTML | Internet Explorer | Linux | Microsoft | Mozilla | Tool | Windows

หลายๆคนคงสังเกตเห็นผมเอา 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:\temp\scriptdd.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://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

Read (6,612) Comments (16) 2007-04-14 17:37:14

โอว!

ยอดมากครับพี่

ขอบคุณสำหรับเรื่องราวดีๆครับ

โดยคุณ อ๊อด 2007-04-14 22:06:48

หายไปยาวๆ มีบทความดีดี มาเลยเชียว ^^

โดยคุณ pikae 2007-04-15 01:30:33

โอ๊ววยอดเยี่ยมมากเลยคับ..ขอบคุณมากครับ

โดยคุณ ดอกธูป 2007-04-15 02:04:51

ก็สวยดีแล้ว สีชมพู อย่าคิดมาก ฮิๆ

ทีจริง มันน่าจะมีคนทำ module ออกมา สำหรับ php/perl นะ

โดยคุณ โต้ง 2007-04-15 10:34:28

ลองนี่ดู

คุณสมบัติค่อนข้างครบเลยจริงๆ
รีบไปโหลดซะนะ ก่อนมันจะไม่ฟรี

http://www.websitescreenshots.com/

โดยคุณ ปุก 2007-04-15 10:42:46

สีชมพู มันน่าร้ากกกก มากๆ เลยเฮีย

โดยคุณ พร อันทะ 2007-04-15 10:45:38

ไม่ได้เข้าเว็บสะนาน เว็บสวยขึ้นเยอะเลย แบบว่าชอบเรียบๆ อย่างนี้อะ

ลิงค์อื่นอีกวิธีคับ http://www.titov.net/2006/03/19/how-to-make-site-screenshots-with-linux-server/

โดยคุณ rokoman 2007-04-16 01:04:08

ลืมอีกลิงค์ http://www.debian-administration.org/articles/413 สำหรับคนใช้ firefox

ชีวิตอยู่กับลีนุกส์ทุกวันชั่งมีความสุขจิงๆ
สาวก debian, php

โดยคุณ rokoman 2007-04-16 01:16:38

มาคราวนี้มีเรื่องดี ๆ มาให้อ่านอีกแว๊ววว ดีจัง

โดยคุณ 9GRiT 2007-04-16 10:34:09

เอ อย่างนี้ ก็น่าจะมี plugins สำหรับ Wordpress ด้วยสิเนี่ย เดี๋ยวไปหาดีกว่า

โดยคุณ DJ PAT 2007-04-20 01:35:40

ยังๆไง ก็ต้องใช้ browser เหรอ น่าจะ generate ผ่าน scripts

ป.ล. ตอนแรก นึกว่าเข้าผิดเว็บ

โดยคุณ Patrickz 2007-04-24 16:51:31

เยี่ยม ครับ เยี่ยม เอาอะไรแบบนี้มาอัพเดทบ่อย ๆ น่ะครับ

โดยคุณ modx 2007-04-27 13:44:25

เจ๋งๆ ชอบครับ

โดยคุณ ตั๋ง 2007-05-08 17:23:07

เจ๋งมากๆ ครับ ชอบๆ อยากได้แบบนี้มานานแล้ว เคยแกะรอย Snap แล้วแต่ไปไม่ถูก

โดยคุณ msdn 2007-06-18 01:40:46

สุดยอดมากเลยอ่ะ

โดยคุณ jommann 2007-11-02 15:58:04

ส่วนผมนี่ ยุ่งยากกับทางโฮสต์มากกว่าครับ อยากได้แบบเขียนด้วย GD มีเปล่ครับพี่อั้ม(พัชราภา)

โดยคุณ k2w 2008-01-03 21:07:37