แก้รูป .png พื้นหลังไม่โปร่งแสง

ปัญหานี้เป็นเรื่องที่สร้างความ งง กันมาแล้วนับไม่ถ้วน ด้วยความที่ว่าเราสร้างรูป .png ให้พื้นหลังมันโปร่งแสง เพราะว่าจะได้เอาไปวางบนรูปอื่นได้ โดยหากปรกติคนที่ใช้ Firefox Browser อยู่แล้วก็จะเห็นได้ว่ามันก็ปรกติดี พื้นหลังเราก็สามารถมองทะลุได้ตามปรกติ แต่วันใดที่เราทดสอบเปิดเว็บเราเองด้วย Internet Explorer แล้วล่ะก็ เราก็จะเห็นว่ารูป .png ที่เคยมีพื้นหลังที่โปร่งแสง กลับกลายเป็นมีพื้นสีเทา(หรือสีอื่น) ซึ่งนั่นอาจจะไม่ใช่เรื่องที่น่าพิศมัยหรือน่าใช้เท่าไรเลยอย่างแน่นอน อย่างผมเองครั้งแรกที่เจอ นั่งแก้รูปอยู่ตั้งนาน แก้แล้วแก้อีก save แล้ว save อีก สุดท้ายยอมครับ ไม่ไหวจริงๆ

สำหรับปัญหานี้เคยได้รับคำแนะนำถึงวิธีแก้ไขจากท่านสมาชิกของเราครับ แต่หลังจากที่ผมเอาไปลองเอง ปรากฏว่าแก้ไม่ได้ ยังไม่หายเหมือนเดิม.... (สงสัยวิทยายุทธผม ยังไม่ถึงขั้น)

แล้วพอดีว่า วันนี้ระหว่างที่ผมกำลังปั้น php-fusion core7 ขึ้นมาสำหรับเว็บส่วนตัวของผมเองนั้น ก็พบว่า ผมสามารถนำรูป png โปร่งแสง มาใช้ในเว็บ php-fusion ได้สบายเลย แสดงว่า บัดนี้ สามารถแก้ไขเรื่องของ PNG ที่ไม่โปร่งแสงได้แล้ว (คือเค้าแก้กันได้ตั้งนานแล้ว แต่ผมยัง งมโข่งอยู่)

วันนี้เราจะเลิกงมโข่งกันครับ 555 ว่าแล้วพี่ google ก็จัดให้ หลังจากที่ผมได้ค้นข้อมูลสักเล็กน้อยก็พบว่าปัญหานี้พบได้สำหรับผู้ที่ใช้ งาน IE6 ลงมา (บ้านเรา Browser หลักๆที่ยังนิยมใช้กันคือ IE6) จะเจอปัญหา ภาพ .png ไม่โปร่งแสงเหมือนกันหมด โดยเราจะเห็นว่าเป็นพื้นสีเทาแทน

เค้าบอกว่า ปัญหานี้เกิดจาก IE ไม่สามารถ render ภาพ .png 32 bit ได้เลยออกมาได้พื้นสีเทา

ปัญหาสู่ทางแก้

เราก็ได้วิธีแก้ไขมาด้วยครับ วิธีแก้นั้นง่ายนิดเดียวเอง ผมจะทำให้ดูครับ

เริ่มต้นจาก ผมมีรูปในหน้าเว็บ ที่เป็น png ธรรมดา 1 ชิ้น เปิดดูด้วย IE จะเห็นได้ว่ามันไม่โปร่งแสงนะครับ ผิดจากที่เปิดด้วย firefox
รูปด้านล่างฝั่งซ้ายเปิดด้วย Internet Explorer ฝั่งขวาเปิดด้วย Firefox ด้วยหน้าเว็บเดียวกันจะเห็นว่าให้ผลที่ต่างกัน

สำหรับโค้ดที่ผมใช้ มีดังนี้ (รูปนี้ชื่อ img.png)

<html>
<head>
<title>1</title>
</head>
<body>
<img src="/img.png" mce_src="/img.png">
</body>
</html>

ต่อมา ผมก็เอาไฟล์ javascript ตัวนี้ (คลิกขวา save link as....) ไปใส่เข้าไปในหน้าเว็บก็จะได้โค้ดดังนี้ (ผมวางในแฟ้มเดียวกันนะครับ)

<html>
<head>
<title>1</title>
<!--[if lt IE 7.]>
<script defer type="text/javascript" src="/pngfix.js" mce_src="/pngfix.js"></script>
<![endif]-->
</head>
<body>
<img src="/img.png" mce_src="/img.png">
</body>
</html>

เพิ่มส่วนที่เป็นตัวหนาขึ้นมานั่นเอง โดยจะต้องเอาส่วนที่เป็นตัวหนา วางไว้ใน head section นะครับ ส่วนเรื่องไฟล์ ถ้าย้ายที่วางก็ต้องอ้างอิงให้ถูกด้วยนะครับ

ผลที่ได้หลังจากการเรียกใช้ JavaScript ดังกล่าว

จะเห็นได้ว่า สีพื้นที่เคยมีก็หายไปแล้ว ง่ายๆแค่ใช้ไฟล์นี้เพียงไฟล์เดียว

ดังนั้น web master ก็ควรติดตัวไว้ใช้ อุ่นใจค่ะ 5555 เท่านี้เราก็ได้วิธีการแก้ปัญหา เรื่องรูป png ไม่โปร่งแสงแล้วนะครับ ท้ายนี้ต้องขอบคุณ http://homepage.ntlworld.com/bobosola ที่เขียนโค้ดดีๆให้เราได้ใช้ครับ

ที่มา : http://web.meewebfree.com