image « แลกเปลี่ยนเรียนรู้:km tool

archive page

คำสำคัญ ‘image’

ภาพปกนิตยสารด้วยการซ้อนภาพ ภาษา PHP

โดย บุรินทร์ รุจจนพันธุ์ เมื่อ Sunday, June 19th, 2011
merge image by php

merge image by php

19 มิ.ย.54 อ.พจน์ เล่าให้ฟังว่า ท่านใช้บริการ magmypic.com ทำให้ได้ภาพปก magazine สวย ๆ เป็นแรงกระตุ้นสำคัญให้ผมสนใจเรื่องนี้

แล้วผมก็สนใจ เข้าไปทดสอบ และค้นข้อมูลเพิ่มเติม ผลการทดลองใช้อยู่ใน thaiall.com/actress/joom.htm จากนั้นก็ต่อยอดมาทดสอบเขียนโปรแกรมด้วยภาษา PHP ทำการ Merge ภาพ 2 ภาพ คือ กรอบรูป และภาพผู้หญิง ก็พบว่า ได้ผลเป็นไปในแทนเดียวกับ magmypic.com ส่วนการประยุกต์ต่อไปคือ การทำเป็น fb application ให้เพื่อน ๆ ได้ใช้บริการส่งรูปที่อยู่ใน fb เข้ามาในระบบ ซึ่งเคยเห็นบริการแบบนี้อยู่มากมาย ถ้าลองทำในแบบไทยไทย ก็น่าสนใจอยู่ไม่น้อย .. แต่คงต้องพักไว้ก่อน เพื่อน ๆ สนใจโค้ด php จะลองเอาไปทำก็ได้ครับ ปัญหาคือ ต้องทำภาพ mag01.gif ให้เป็นภาพโปร่งใส ของผมใช้โปรแกรม iview ช่วยจัดการส่วนนี้ .. มิเช่นนั้นผลการซ้อนภาพจะมีปัญหาครับ

<?
$user = ‘user.jpg’;
$frame = ‘mag01.gif’;
$dest = imagecreatefromgif($frame);
$src = imagecreatefromjpeg($user);
$src_new = imagecreatetruecolor(280, 350);
list($width, $height) = getimagesize($user);
imagecopyresized($src_new, $src, 0, 0, 0, 0 , 280, 350, $width,$height);
imagecopymerge( $src_new, $dest, 0, 0, 0, 0, 280, 350, 100);
header(‘Content-Type: image/jpeg’);
imagegif($src_new);
imagedestroy($dest);
imagedestroy($src);
imagedestroy($src_new);
?>

http://www.thaiall.com/mag/merge.php
http://www.facebook.com/media/set/?set=a.213477228691078.52727.100000864060918


สไลด์ภาพด้วย jquery

โดย บุรินทร์ รุจจนพันธุ์ เมื่อ Monday, May 2nd, 2011
slide jquery

slide jquery

2 พ.ค.54 การทำสไลด์ภาพ (image slide) เริ่มมีให้เห็นในเว็บไซต์ต่าง ๆ เพิ่มขึ้น มีแบบ javascript และ flash ถ้าเป็น flash ก็จะดูน่าตื่นตาตื่นใจกว่าแบบ javascript อย่างเห็นได้ชัด แต่การใช้ javascript จะจัดการง่าย และไม่ต้องกังวลเรื่องการรองรับของ browser ในอุปกรณ์ของผู้ใช้ เพราะอุปกรณ์ส่วนใหญ่จะรองรับ javascript แต่มีน้อยลงที่รองรับ flash file

สำหรับ slide ของ jquery จะดูดีมาก และผมได้แก้ไข code บางส่วนให้นำมาใช้งานได้ง่าย ลอง download ไปทดสอบดูได้ครับ
http://www.thaiall.com/java/slidejquery/slide.htm
http://www.thaiall.com/java/slidejquery/slidejquery.zip
http://www.thaiall.com/blog/burin/2339/


ภาพเสมือนจริงของ shu

โดย บุรินทร์ รุจจนพันธุ์ เมื่อ Sunday, January 9th, 2011
shu animation

shu animation

นับวันภาพเสมือนจริง จะเหมือนจริงเพิ่มขึ้นทุกวัน
ในภาพชุดของ shu มีรูปแบบของตัวเองที่น่าสนใจ
จึงนำมาแบ่งปัน เข้าได้ที่ http://www.shu-littlebit.com
ซึ่งนำเสนอภาพด้วย flash อย่างสวยงาม


การสั่งเปิด image เป็น layer ใหม่ในเว็บพจเดิม

โดย บุรินทร์ รุจจนพันธุ์ เมื่อ Sunday, November 7th, 2010
alumni

alumni

7 ต.ค.53 lightbox เป็นชุดสคริ๊ปสำหรับเปิดภาพเป็น layer ใหม่ในเว็บเพจเดิม พัฒนาโดย huddletogether.com จากการทดสอบใน gallery ของ joom พบว่าแต่ละภาพมีขนาดไม่สม่ำเสมอ ถ้าไม่ปรับ code ก็จะควบคุมการแสดงผลไม่ได้ แต่ทดสอบกับ gallery ของ ynalumni พบว่าใช้งานได้ดี เพราะภาพทั้งหมดได้มาจาก facebook ซึ่งมีการปรับความกว้างของทุกภาพให้เท่ากัน และไม่กว้างเกินขนาดของ windows จึงสะดวกในการใช้ previous หรือ next พบว่ามีการใช้งานในหลายเว็บไซต์ เช่น toptenthailand.com หรือ sopitthaspa.com

การกำหนดความสูง ของ lightbox : ทำได้โดยกำหนดใน lightbox.css โดยเติม top:0!important; เข้าไปใน #lightbox{ }

การติดตั้ง lightbox ในแฟ้ม .htm : ทำได้โดยส่ง 6 แฟ้ม คือ lightbox.css builder.js effects.js lightbox.js prototype.js scriptaculous.js เข้าไปในห้องที่เก็บแฟ้ม .htm แล้วเพิ่ม 4 บรรทัดนี้เข้าไปในส่วนหัวของ .htm แล้ว link ของภาพ ก็เติม rel=”lightbox[roadtrip]“ หรือ rel=”lightbox” เข้าไป เช่น <a href=”burin.jpg” rel=”lightbox[roadtrip]“><img src=”burin.jpg”></a>

code 4 บรรทัดสำหรับ .htm
<link rel=”stylesheet” href=”lightbox.css” type=”text/css” media=”screen” />
<script src=”prototype.js” type=”text/javascript”></script>
<script src=”scriptaculous.js?load=effects,builder” type=”text/javascript”></script>
<script src=”lightbox.js” type=”text/javascript”></script>

แนะนำเว็บไซต์
http://www.huddletogether.com/projects/lightbox2/releases/lightbox2.04.zip
http://www.thaiall.com/java/lightbox/lightbox204a.zip
http://www.thaiall.com/java/lightbox/lightbox.htm
http://www.thaiall.com/actress/joom.htm
http://www.thaiabc.com/ynalumni/photo.asp


contentslider javascript

โดย บุรินทร์ รุจจนพันธุ์ เมื่อ Saturday, October 16th, 2010
content slider

content slider

16 ต.ค.53 คุณธรณินทร์ สุรินทร์ปันยศ ช่วยให้ผมได้ศึกษาเรื่องของ การใช้ javascript ทำ slide show เมื่อเปรียบเทียบแล้วพบว่า ใช้งานได้ดีกว่า dm-album  ในกรณีนี้ ซึ่งปกติผมจะปิดกั้นตนเองไม่ศึกษาเรื่องแบบนี้ แต่ อ.ทันฉลอง รักษาการอธิการ มีนโยบายให้มีการปรับปรุงเว็บไซต์ทั้งระบบ ประกอบกับ code ชุดนี้ เคยถูกนำมาใช้งานโดย  startupthailand.com เมื่อแกะโค้ด ก็พบว่ามีการ import แฟ้ม contentslider.js เพียงแฟ้มเดียว ซึ่งนำไปใช้ได้ง่าย แล้วเผยแพร่ใน thaiall.com/java หัวข้อ 2.18 เพื่อให้นักพัฒนาคัดลอก .zip ที่มีตัวอย่างและปรับ code เบื้องต้นแล้ว .. (ปัญหา สร้าง โอกาส)

ต.ย.  http://www.thaiall.com/java/contentslider/contentslider.htm

และ http://www.thaiall.com/java/contentslider/contentslider.zip

http://www.thaiall.com/blog/burin/3205/


ภาพสร้างสรรค์ ชวนให้คิด ชวนให้มีอารมณ์

โดย บุรินทร์ รุจจนพันธุ์ เมื่อ Sunday, August 22nd, 2010
hero turko

hero turko

22 ส.ค.53 รวมภาพสร้างสรรค์ (Creative) ชวนให้คิด ชวนให้มีอารมณ์ ในรูปของ Blog ที่มี Freelance เข้าไปฝากผลงานไว้มากมาย จัดกลุ่มเป็นหมวดหมู่ ได้แก่ 3D Models AD Works Art Images Dating – PUA Documentaries E-Books Fashion Fonts Footages Funny Stuff Games Icons Magazines Magic & Illusion Magical Treasure Medical Mobile Movies (BluRay) Movies (DVD) Movies (Xvid) MUSIC Off Topic Others PhotoShop Plugins Portfolios RF Images Software Sound & Music Stock Images CD’s Templates Tutorials TV (Box Set) TV Shows Vectors Video Wallpaper
+ http://www.heroturko.org


nectec สนับสนุนใช้ gimp ตกแต่งภาพ ทดสอบแล้วบอกต่อ

โดย บุรินทร์ รุจจนพันธุ์ เมื่อ Wednesday, July 29th, 2009

gimp29 ก.ค.52 วันนี้มีโอกาสทดสอบโปรแกรม GIMP (GNU Image Manipulation Program) เป็น Open Source Program สำหรับจัดการภาพ โปรแกรมนี้ Nectec.or.th และ SIPA ให้การสนับสนุนให้ใช้งาน สามารถ Download รุ่น 2.6.6 ได้จาก mirror.in.th โปรแกรมนี้เริ่มต้นพัฒนาให้ใช้งานบนระบบปฏิบัติการ Linux แต่ปัจจุบันใช้งานได้บน Windows แล้ว จากการทดสอบผมก็ใช้เพียง 1)ซ้อนเลเยอร์2ภาพ 2)ใช้ยางลบขจัดส่วนเกิน 3)ฟิวเตอร์เงาสีขาว 4)ฟิวเตอร์ Lens Flare 5)Crop เท่าที่ต้องการ 6)Save As เป็น JPG จากแฟ้มต้นฉบับ คือ me_at_clock.xcf แล้วนำภาพ before กับ after มาวางคู่กันใน Paint กำหนดความกว้าง 450 Pixels ก่อน upload ครับ