โปรแกรมจัดการภาพเก่า และเล็ก แต่เจ๋ง

irfanview by Irfan Skiljan, Graduate of Vienna University
irfanview by Irfan Skiljan, Graduate of Vienna University

วันนี้ฤกษ์ดี (600716) หลังใช้โปรแกรม Irfanview
ดึงข้อมูล Miss Grand 2017
http://www.thaiall.com/actress/missgrand2017
ว่าสาวงามทั้ง 77 จังหวัด แต่ละจังหวัดมีภาพชื่ออะไร
เพื่อนำมาเตรียมข้อมูลในแบบ JSON สำหรับทำ PWA
ยิ่งเล่าก็ยิ่งเลยเถิด มาจับประเด็นที่ Irfanview กันดีกว่า
http://www.irfanview.com/

ประเด็นที่อยากพูดถึงวันนี้
1. โปรแกรม irfanview มีถึงรุ่น 4.44 ณ 16 กรกฎาคม 2560
แต่ผมยังใช้รุ่น 3.51 ตัวเล็กแค่ 635 KB เท่านั้น
Copyright (C) 1996-2001 by Irfan Skiljan, Graduate of Vienna University
2. การใช้โปรแกรมเพื่อเก็บชื่อภาพ และข้อมูลในภาพ
มีขั้นตอนคือ view ภาพก็จะเห็นข้อมูลในภาพ เช่น จังหวัด หรือ ชื่อนางสาว
แล้วกดปุ่ม F6 จะเข้า Rename แต่กดปุ่ม Ctrl-C เพื่อคัดลอกชื่อ
กดปุ่ม Alt-Tab กระโดดไป Editor
เพื่อวางข้อมูลด้วย Ctrl-V เป็นการวางชื่อแฟ้มที่ได้ในตำแหน่งที่เหมาะสม
แล้วพิมพ์ชื่อจังหวัดไปคู่กัน
3. ทำภาพ Transparent ก็ทำตอน Save as เลือก Transparent color
สกุล .gif แต่ภาพต้องมีจำนวนสีไม่มากตามคุณสมบัติของ .gif นะครับ
4. ทำแฟ้ม gallery อย่างรวดเร็ว ก็เลือก File, Thumbnails
จากนั้นเลือก File, Save selected thumbs as HTML file
5. ถ้ามีแฟ้มจำนวนมาก และต้องการ rename ให้ชื่อแฟ้มมีลำดับ
ก็ทำโดยเลือก File, Batch Conversion/Rename

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

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

25 ก.พ.56 ปรับบริการของโฮมเพจหน้าปกนิตยสาร (magazine cover)
http://www.thaiall.com/mag

หน้าปกนิตยสาร (magazine cover)
หน้าปกนิตยสาร (magazine cover)

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

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

shu animation
shu animation

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

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

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

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/

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

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 ตกแต่งภาพ ทดสอบแล้วบอกต่อ

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 ครับ