Scriptdd.com

บทความบ้าบ่นของคนทำเว็บ ปี 8

การทำ 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 (29,652) Comments (23) 2007-04-14 17:37:14

ความคิดเห็น

โอว!

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

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

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

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

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

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

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


เที่ยวสุรินทร์นึกถึง สุรินทร์ร้อยแปด http://www.surin108.com

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

ทีจริง มันน่าจะมีคนทำ 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 โดยคุณ rokoman 2007-04-16 01:04:08

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

เยี่ยมครับ ขอบคุณมาก

รูปคุณ นายอักษร โดยคุณ นายอักษร 2008-11-30 18:55:16

มีวิธีทำให้มัน Auto run เว็บที่เราอยากให้ capt หรือป่าวครับ

รูปคุณ penthai06 โดยคุณ penthai06 2008-12-02 13:03:01

เยี้ยมครับ แต่ผมว่าผมไม่เข้าใจอยู่ดีครับพี่
ผม แบบว่า งง

รูปคุณ โต้ครับ โดยคุณ โต้ครับ 2010-01-22 11:08:46

ขอบคุณครับ

รูปคุณ wcee โดยคุณ wcee 2010-05-02 12:39:06


มีวิธีนี้ด้วยหรอคับๆ
ขอบคุณมากๆๆ คับ

รูปคุณ #include<mildz.h> โดยคุณ #include<mildz.h> 2010-07-18 16:57:40

เอาไปใช้ในบล็อกเราบ้างดีกว่า

รูปคุณ ijunnn โดยคุณ ijunnn 2010-08-06 16:14:56

เยี่ยมๆ เลยครับ แจ่มๆๆ

รูปคุณ bom โดยคุณ bom 2010-08-28 15:46:11

ร่วมแสดงความคิดเห็น



ขอความกรุณา ปัญญาชน ทุกๆท่าน รณรงค์การใช้ภาษาไทยให้ถูกต้อง
กรุณา ลงความคิดเห็นโดยใช้ภาษาไทยให้เป็นภาษาไทย งดการใช้ภาษาวัยรุ่น,
แอ๊บแบ๊ว บอกตรงๆปัญญาอ่อน !! Admin นั่งอ่านแล้วปวดหัว

เข้าระบบ


จำไว้ด้วยนะจ้ะ

สมัครสมาชิก
ลืมรหัสผ่าน

บทความล่าสุด

Gallery

Tags

TV Phantom JavaScript Travel Honda Payment Gateway Android Testdrive Clip Video API Shopping Live เฟรมเสือหมอบ ThinkPad How to จักรยาน DOM PHP MySQL SMS Microsoft Google Windows7 Book CSS Food Home Tool Mozilla

อื่นๆ ...

เพื่อนบ้าน

สถิติส่วนตัว

คลิกรับ Feed สิจ๊ะ

TwitterCounter for @9aum

Scriptdd.com | ctdd Version 3.0 ติดต่อฐานข้อมูลทิ้งสิ้น 6 ครั้งใช้เวลาประมวลผล 0.2020 วินาที
โปรแกรมโดย 9AuM | ออกแบบโดย styleshout