สร้างพื้นหลังโปร่งใสทางออนไลน์ วิธีทำพื้นหลังโปร่งใสให้กับรูปภาพ ตัดด้วยพื้นหลังโปร่งใส

แน่นอนว่ารูปแบบ JPEG ไม่รองรับความโปร่งใส แต่แนวคิดในการใช้ JPEG แทน PNG สำหรับพื้นผิวแบบโปร่งใสนั้นเป็นสิ่งที่ผู้คนน่าตื่นเต้นมาระยะหนึ่งแล้ว Comrade PaulZi เมื่อไม่นานมานี้เสนอให้ใช้รูปแบบ SVG สำหรับ HTML ซึ่งจัดเก็บรูปภาพและมาสก์ Jim Studt แนะนำให้ใช้ช่อง EXIF ใน JPEG และจัดเก็บมาสก์ไว้ที่นั่นและแสดงไว้บนหน้าเว็บโดยใช้ Canvas
ทั้งสองวิธีใช้งานได้ค่อนข้างยากและได้รับการออกแบบสำหรับเว็บ ดังนั้นฉันจึงเลือกตัวเลือกที่ง่ายที่สุด: เก็บ JPEG ที่สูญหายสำหรับ RGB และมาสก์แบบไม่สูญเสียใน PNG แยกกัน และรวมเข้าด้วยกันในขั้นตอนการรับ UIImage ในโปรแกรม ฉันอยากจะบอกทันทีว่าฉันกำลังเขียนใน MonoTouch ดังนั้นฉันจึงนำเสนอโค้ดใน C# แม้ว่าใน ObjC จะทำในลักษณะเดียวกันเกือบทั้งหมดโดยคำนึงถึงไวยากรณ์

การแยกช่องสัญญาณสำหรับการแยกฉันใช้ยูทิลิตี้คอนโซล ImageMagik
คำสั่งนี้แยกช่องอัลฟ่า:
แปลง file.png -channel Alpha -แยก file.mask.png

คำสั่งต่อไปนี้จะสร้างไฟล์ JPEG โดยละทิ้งข้อมูลโปร่งใส สิ่งที่เป็นเรื่องปกติคือยูทิลิตี้อื่น ๆ (รวมถึง Photoshop) เมื่อแปลงไฟล์ PNG เป็น JPEG ให้เพิ่มพื้นหลังสีเดียวลงไปแล้วบันทึกเป็น RGB ซึ่งให้ภาพที่สวยงาม แต่ไม่ถูกต้องด้วยอัลฟ่าที่คูณไว้ล่วงหน้า .
แปลง file.png - คุณภาพ 90 - อัลฟา ปิด file.jpg

คุณภาพของไฟล์ที่ได้รับจะถูกควบคุมโดยพารามิเตอร์ คุณภาพ 90. คุณภาพ 90% สำหรับ JPEG นั้นมากกว่าที่ Apple กำหนดไว้สำหรับภาพหน้าจอของโปรแกรมและภาพยนตร์ ฉันคิดว่าทุกคนสามารถปรับค่านี้ให้เข้ากับรสนิยมของตัวเองได้

การเพิ่มประสิทธิภาพ หน้ากากจะได้รับเป็น PNG ระดับสีเทา 8 บิตโดยไม่มีความโปร่งใส รูปแบบนี้ได้รับการบีบอัดอย่างสมบูรณ์แบบผ่าน optipng หรือผ่านทางเว็บไซต์ www.tinypng.org
สถานการณ์ของ JPEG นั้นน่าสนใจยิ่งขึ้น ฉันสามารถจำกัดตัวเองให้ตั้งค่าคุณภาพได้อย่างเดียว แต่เมื่อเร็ว ๆ นี้ ฉันได้พบกับยูทิลิตี้ jpegrescan ที่ยอดเยี่ยมจาก Loren Merritt หนึ่งในนักพัฒนา ffmpeg และตัวเข้ารหัส x264 ( มีข้อสงสัยเกี่ยวกับเขาว่าเขาเป็นตัวแทนของหน่วยสืบราชการลับของมนุษย์ต่างดาวหรือสมองไซเบอร์เนติกส์).
ยูทิลิตี้นี้ใช้วิธีการที่ผิดปกติ: เลือกค่าสัมประสิทธิ์ที่แตกต่างกันสำหรับการบีบอัดแบบโปรเกรสซีฟและเลือกค่าที่เหมาะสมที่สุด การชนะมีตั้งแต่ 5 ถึง 15% ด้วยคุณภาพของภาพที่เหมือนกัน ยูทิลิตี้นี้ไม่มีหน้าของตัวเอง มีเพียงหัวข้อที่มีการสนทนาและโค้ด Perl เท่านั้น: pastebin.com/f78dbc4bc

เพื่อไม่ให้ป้อนคำสั่งด้วยตนเองทุกครั้ง ฉันจึงเขียนสคริปต์ทุบตีง่ายๆ:
#!/bin/bash basefile=$(1##*/) maskfile="$(basefile%.*).mask.png" jpegfile="$(basefile%.*).jpg" แปลง $1 -channel Alpha - แยก $maskfile แปลง $1 -คุณภาพ 90 -alpha ปิด $jpegfile optipng $maskfile jpegrescan $jpegfile $jpegfile

นี่คือผลลัพธ์ของสคริปต์:

ในกรณีของฉัน จากไฟล์ขนาด 1.8 MB ฉันได้ไฟล์ขนาด 380 KB และ 35 KB สองไฟล์

การติดกาว การติดกาวนั้นง่ายมาก - โหลดรูปภาพสองรูปลงใน UIImage จากนั้น CGImage จะถูกสร้างขึ้นโดยใช้วิธี WithMask (ใน ObjC นี่คือ CGImageRef และ initWithMask ตามลำดับ) จากนั้นจึงห่อด้วย UIImage ใหม่
ผลลัพธ์ UIImage; การใช้ (UIImage uiimage = UIImage.FromFile(file)) การใช้ (UIImage mask = UIImage.FromFile(maskFile)) ( CGImage image = uiimage.CGImage; image = image.WithMask(mask.CGImage); result = UIImage.FromImage(image) , uiimage.CurrentScale, uiimage.Orientation); )

ในโครงการจริง ฉันทำให้มันซับซ้อนขึ้นเล็กน้อยและตรวจสอบว่ามีไฟล์ *.mask.png หรือไม่ และหากไฟล์หายไป ฉันจะส่งคืน UIImage.FromFile() ตามปกติ

กำไร

สายตาเกมไม่ได้เปลี่ยนแปลงเลย ความล่าช้าในการโหลดและติดกาวพื้นผิวไม่สามารถมองเห็นได้ด้วยตา ดังนั้นฉันจึงไม่ได้วัดมัน ตัวโครงการเองลดลง 6 (!!) เมกะไบต์ ทั้งในรูปแบบ .ipa และใน iTunes และบนอุปกรณ์

ภาพหน้าจอจากเกมใน PNG ไม่พบสิ่งแปลกปลอมหรือปัญหาการบีบอัด/ความโปร่งใส
รูปภาพจำนวนสองเท่าในโฟลเดอร์โปรเจ็กต์ทำให้เกิดความสับสนเล็กน้อย แต่ก็สามารถเอาชนะได้ การเปลี่ยนแปลงรหัสมีเพียงเล็กน้อย สำหรับกราฟิกอินเทอร์เฟซ วิธีการนี้ไม่เหมาะเนื่องจากจำเป็นต้องกำหนด UIImage ด้วยตนเอง แทนที่จะโหลดจาก NIB/XIB แต่ค่อนข้างเหมาะสำหรับการควบคุมหรือพื้นผิวของคุณเอง แม้ว่า JPEG จะถูกบันทึกที่คุณภาพ 100% ขนาดไฟล์ที่ได้อาจเล็กกว่า PNG ต้นฉบับโดยไม่สูญเสียคุณภาพ

ป.ล. ImageMagick และ optipng ได้รับการติดตั้งจากพอร์ต (MacPorts/Fink/Brew) และมีชื่อเหมือนกัน ดาวน์โหลดสคริปต์ jpegrescan จาก

สิ่งสำคัญคือระบุรูปภาพบนคอมพิวเตอร์หรือโทรศัพท์ของคุณ จากนั้นคลิกตกลงที่ด้านล่างของหน้านี้ ตามค่าเริ่มต้น พื้นหลังธรรมดาของรูปภาพจะถูกแทนที่ด้วยพื้นหลังโปร่งใส สีพื้นหลังของภาพต้นฉบับจะถูกกำหนดโดยอัตโนมัติ คุณเพียงแค่ต้องระบุในการตั้งค่าว่าจะแทนที่ด้วยสีใด พารามิเตอร์หลักที่มีอิทธิพลต่อคุณภาพของการเปลี่ยนคือ "ความเข้มของการเปลี่ยน" และอาจแตกต่างกันไปในแต่ละภาพ

ตัวอย่างภาพถ่ายดอกกุหลาบสีชมพูที่ไม่มีการเปลี่ยนแปลง และหลังจากเปลี่ยนพื้นหลังธรรมดาเป็นโปร่งใส สีขาว และสีเขียว:

ตัวอย่างแรกที่มีดอกกุหลาบบนพื้นหลังโปร่งใสถูกสร้างขึ้นด้วยการตั้งค่าต่อไปนี้:
1) ความเข้มของการทดแทน - 38;
2) เรียบตามขอบ - 5;
3) แทนที่พื้นหลังธรรมดาด้วยพื้นหลังโปร่งใส
4) ตัดแต่ง (0) ตามขอบ - "-70";
5) กลับด้าน - ปิดการใช้งาน (ไม่ได้เลือก)

ในการสร้างตัวอย่างที่สอง ใช้การตั้งค่าเดียวกันกับตัวอย่างแรกโดยใช้พื้นหลังสีขาว ยกเว้นพารามิเตอร์: “แทนที่พื้นหลังธรรมดาด้วย” - สีขาว ในตัวอย่างที่สาม ด้วยพื้นหลังสีเขียว จะใช้การตั้งค่าเดียวกันกับในตัวอย่างแรก ยกเว้นพารามิเตอร์: “สีในรูปแบบฐานสิบหก” - #245a2d

ภาพต้นฉบับไม่มีการเปลี่ยนแปลงแต่อย่างใด คุณจะได้รับรูปภาพที่ประมวลผลแล้วอีกอันพร้อมพื้นหลังโปร่งใสหรือระบุ

1) ระบุรูปภาพในรูปแบบ BMP, GIF, JPEG, PNG, TIFF:

2) การตั้งค่าสำหรับการเปลี่ยนพื้นหลังธรรมดา
ความเข้มทดแทน: (1-100)

การปรับขอบให้เรียบ: (0-100) แทนที่พื้นหลังธรรมดาด้วย: โปร่งใส (PNG-24 เท่านั้น) สีแดง สีชมพู สีม่วง สีฟ้า สีฟ้าคราม ท้องฟ้า สีเขียวอ่อน สีเหลือง สีส้ม สีดำ สีเทา สีขาว หรือสีฐานสิบหก: จานสีแบบเปิด ครอบตัด (0) ขอบ: (ตั้งแต่ -100) ถึง 100)
(ความเข้มสำหรับการครอบตัดเพิ่มเติมหรือเพิ่มพิกเซลรอบส่วนที่เลือกบนพื้นหลังโปร่งใส) กลับด้านการเลือก (แทนที่พื้นหลังด้วยพื้นหน้า)

นอกจากนี้ เนื่องจากเป็นรูปแบบฟรี PNG จึงมีข้อดีในทางปฏิบัติมากกว่า GIF สำหรับนักออกแบบเว็บไซต์:

การบีบอัดที่ดีขึ้น: สำหรับรูปภาพส่วนใหญ่ PNG จะมีขนาดไฟล์เล็กกว่า GIF
ความลึกของสีที่มากขึ้น: PNG ให้สีจริงสูงสุด 48 บิต ในขณะที่ GIF เรามีชุดสีเพียง 256 สี
ความโปร่งใสของช่องอัลฟ่า: โดยที่ GIF นำเสนอเฉพาะความโปร่งใสแบบไบนารี PNG อนุญาตให้ใช้เอฟเฟกต์ความโปร่งใสได้ไม่จำกัดโดยเสนอช่องอัลฟ่าเพื่อความโปร่งใส

เป็นที่น่าสังเกตว่า PNG ไม่อนุญาตให้มีภาพเคลื่อนไหวเหมือน GIF แต่มีมาตรฐานกราฟิกเครือข่ายหลายภาพ (MNG) ที่อนุญาต แต่เว็บเบราว์เซอร์และโปรแกรมแก้ไขกราฟิกไม่รองรับอย่างกว้างขวางนัก

เหตุใด GIF จึงยังคงได้รับความนิยม?

คุณอาจสงสัยว่าเหตุใด PNG จึงไม่ใช่รูปแบบที่ใช้กันอย่างแพร่หลายบนเว็บ ถ้ามันดีเท่ากับโฆษณา คำตอบส่วนใหญ่คือความเข้าใจผิดเกี่ยวกับรูปแบบและการรองรับเบราว์เซอร์

เนื่องจาก Internet Explorer 6 และรุ่นก่อนหน้าไม่รองรับความสามารถของ PNG อย่างเต็มรูปแบบ (รวมถึงความโปร่งใสของช่องอัลฟ่า) ผู้คนจึงถูกปล่อยให้เชื่อ (แม้ว่าจะไม่เป็นความจริงก็ตาม) ว่า Internet Explorer ไม่รองรับ PNG เลย หรืออย่างน้อยก็ไม่รองรับ สนับสนุนความโปร่งใส ในความเป็นจริง Internet Explorer 5 และ 6 รองรับข้อกำหนด PNG เพียงพอที่จะทำให้ฟังก์ชันเทียบเท่า (หรือดีกว่า) กับรูปภาพ GIF ที่ไม่ใช่ภาพเคลื่อนไหว เบราว์เซอร์อื่นๆ ทั้งหมดที่กล่าวถึง รวมถึง Firefox, Netscape 6 ขึ้นไป, Mozilla, Opera 6 ขึ้นไป, Safari และ Camino รองรับความโปร่งใสของ PNG อย่างสมบูรณ์

นอกเหนือจากความเข้าใจผิดเกี่ยวกับการรองรับเบราว์เซอร์แล้ว แอนิเมชั่นในตัวของ GIF ยังเป็น (และยังคงเป็น) เหตุผลหลักที่ทำให้ประสบความสำเร็จ แม้ว่าในช่วงหลายปีที่ผ่านมา การใช้ GIF จะได้รับความนิยมน้อยลงเรื่อยๆ เมื่อเทียบกับเทคโนโลยีอื่นๆ (เช่น Flash) ซึ่งเริ่มเหมาะกับแอนิเมชั่นมากกว่า

ความโปร่งใสเป็นคุณลักษณะสำคัญของ GIF และ PNG และมักเป็นสาเหตุที่นักออกแบบเว็บไซต์เลือกรูปแบบที่จะใช้ แม้ว่า PNG จะให้การสนับสนุนที่ครอบคลุมมากขึ้นเพื่อความโปร่งใส แต่นักออกแบบเว็บไซต์มักจะจำเป็นต้องสร้างรูปภาพเวอร์ชัน GIF เพื่อให้เหมาะกับเบราว์เซอร์รุ่นเก่า การใช้ CSS สิ่งนี้เป็นไปได้ (และค่อนข้างเล็กน้อย) โดยการส่งภาพ GIF สำหรับเบราว์เซอร์รุ่นเก่าและภาพ PNG คุณภาพสูงไปยังเบราว์เซอร์ที่เข้าใจ แต่นี่เป็นงานสองเท่าสำหรับนักออกแบบเว็บไซต์ และเป็นผลให้ผู้คนเดินตามเส้นทางที่มีการต่อต้านน้อยที่สุดและยังคงใช้ภาพ GIF ต่อไป

ดังนั้นเราจึงได้พิจารณาเหตุผลบางประการที่ทำให้ GIF ยังคงได้รับความนิยม แต่เหตุผลส่วนใหญ่นั้นมาจากความเข้าใจผิดในแนวคิดหรือการใช้ขั้นตอนการทำงานที่คุ้นเคย ด้วยความรู้ที่สำคัญบางประการเกี่ยวกับ PNG และวิธีใช้งานอย่างน่าเชื่อถือในเบราว์เซอร์ คุณสามารถใช้ประโยชน์จากสิทธิประโยชน์ทั้งหมดที่มีให้

แล้ว JPEG ล่ะ?

JPEG เป็นรูปแบบเว็บอีกรูปแบบหนึ่งที่แพร่หลาย และในกรณีส่วนใหญ่ เช่น ภาพถ่าย (และสิ่งที่คล้ายกัน) รูปแบบนี้จะดีกว่า PNG หรือ GIF อีกด้วย PNG ไม่ได้มีจุดมุ่งหมายเพื่อแข่งขันกับ JPEG การบีบอัด JPEG จะสร้างไฟล์ที่มีขนาดเล็กกว่า PNG อย่างมากเมื่อทำงานกับภาพถ่าย ในทางกลับกัน PNG จะสร้างไฟล์ที่มีขนาดเล็กลงเมื่อมีข้อความ เส้นศิลปะ โลโก้ สี "เรียบๆ" ฯลฯ อยู่ภายในภาพ

ตัวอย่างที่ดีของการใช้ PNG แบบเรียบง่าย

ตอนนี้เรามาดูวิธีใช้ PNG ในการออกแบบเว็บไซต์ ฉันได้รวบรวมไฟล์ทั้งหมดสำหรับแต่ละตัวอย่างไว้ในโฟลเดอร์แยกต่างหากซึ่งมีอยู่ในเพื่อนๆ ของ ED

การไล่ระดับสี

ในช่วงไม่กี่ปีที่ผ่านมา การไล่ระดับสี ซึ่งเป็นการเปลี่ยนสีอย่างราบรื่นระหว่างสองสีขึ้นไป ได้กลายเป็นเพื่อนที่ดีที่สุดของนักออกแบบเว็บไซต์ สิ่งที่ได้รับความนิยมเป็นพิเศษคือการเติมการไล่ระดับสีแบบละเอียดอ่อนซึ่งสร้างความรู้สึกถึงความลึกและพื้นผิวโดยไม่ทำให้เด่นชัด
บางครั้ง GIF ก็เป็นตัวเลือกที่ดีที่สุดสำหรับการไล่ระดับสี หากการไล่ระดับสีเป็นการเปลี่ยนสีแบบสองสีธรรมดา GIF จะทำงานได้อย่างไร้ที่ติ อย่างไรก็ตาม ข้อจำกัดของ GIF ที่จะมีเพียง 256 สีมักจะทำให้เกิด "แถบสี" ที่เห็นได้ชัดเจนและเลอะเทอะท่ามกลางการไล่ระดับสีที่ซับซ้อนมากขึ้น ในทางกลับกัน JPEG สามารถเอาท์พุตการไล่ระดับสีที่ค่อนข้างเรียบร้อย แต่มักจะต้องใช้ขนาดไฟล์ที่ใหญ่กว่า แม้ว่าการไล่ระดับสีของ JPEG โดยทั่วไปจะค่อนข้างดี แต่คุณต้องจำไว้ว่า JPEG ใช้การบีบอัดแบบสูญเสียข้อมูล ซึ่งหมายความว่าภาพที่ได้จะไม่คงคุณภาพตามคุณภาพของรูปภาพที่ไม่มีการบีบอัด

รูปแบบการไล่ระดับสีพื้นหลังโดยทั่วไปนั้นใช้สำหรับปุ่ม บล็อก หรือที่อื่นๆ อาจจะดูเหมือนรูปที่ 5-1 ตามเข็มนาฬิกาจากมุมซ้ายบน เราจะเห็นภาพต้นฉบับ (ไม่บีบอัด), เวอร์ชัน GIF, เวอร์ชัน PNG และ JPEG คุณจะเห็นว่า PNG ที่ได้นั้นมีขนาดเล็กที่สุด (515 ไบต์) ซึ่งมีขนาดเล็กกว่าภาพ GIF ถึงสี่เท่า JPEG มีขนาดใหญ่กว่า PNG เล็กน้อยที่ 637 ไบต์ และยังมีคุณภาพต่ำกว่าเนื่องจากการบีบอัดที่สูญเสียไป (แม้ว่าความสามารถของสายตามนุษย์ในการตรวจจับความแตกต่างของคุณภาพในตัวอย่างง่ายๆ นี้ยังคงเป็นปัญหาอยู่)

รูปที่ 5-1
แผง Photoshop - บันทึกสำหรับเว็บ
แสดงความแตกต่างของขนาดไฟล์สำหรับรูปภาพเดียวกันในรูปแบบที่แตกต่างกัน

รูปภาพที่ควรใช้กับพื้นหลังใดก็ได้

บางครั้งคุณจำเป็นต้องสร้างรูปภาพที่ทำงานเหมือนกันบนพื้นผิวที่แตกต่างกัน ตัวอย่างทั่วไปบางส่วนได้แก่ โลโก้และไอคอน ไฟล์ GIF มักจะครอบงำสถานการณ์เหล่านี้ แต่มีสาเหตุหลายประการที่ทำให้ PNG อาจเป็นตัวเลือกที่ดีกว่าในสถานการณ์นี้ PNG มักจะชนะในขนาดไฟล์สำหรับโลโก้หรือ "ศิลปะ" ง่ายๆ อื่นๆ นอกจากนี้ ความโปร่งใสโดยธรรมชาติของ PNG ยังทำให้ง่ายต่อการสร้างไฟล์เดี่ยวที่ทำงานบนพื้นหลังใดๆ ก็ได้ PNG นำเสนอความโปร่งใสแบบไบนารี เช่น GIF แต่ยังมีตัวเลือกอัลฟาแชนเนลที่เป็นที่ต้องการมากกว่า ซึ่งพิกเซลสามารถมีความโปร่งใสบางส่วน แทนที่จะเพียงแค่เปิดหรือปิด การใช้อย่างหลังจะเพิ่มขนาดไฟล์ ซึ่งบางครั้งก็ใหญ่กว่า GIF ด้วยความโปร่งใสแบบไบนารี่ แต่ช่วยลดรอยหยักที่ขอบของภาพ และทำให้สวยงามยิ่งขึ้นเมื่อวางไว้บนพื้นหลัง

อย่างไรก็ตาม ฉันปรับปรุงแนวคิดของพวกเขาใหม่โดยใช้รูปภาพสีขาวที่มีสัญลักษณ์ลายฉลุ พวกเขาใช้สัญลักษณ์สีขาวบนพื้นหลังโปร่งใส ซึ่งโดยทั่วไปอาจมีประสิทธิภาพค่อนข้างมาก ในกรณีนี้ สีพื้นหลัง CSS ของคุณจะปรากฏในพื้นที่สี่เหลี่ยมจัตุรัสหรือสี่เหลี่ยมรอบๆ สัญลักษณ์ แทนที่จะเป็นสัญลักษณ์นั้นเอง

ทั้ง Dan และ PJ ใช้ GIF แบบโปร่งใสแทน PNG สิ่งนี้ครอบคลุมความต้องการของพวกเขาอย่างสมบูรณ์ และพวกเขาต้องสร้างภาพพิกเซลเพื่อให้เข้ากับสไตล์ของไอคอน เมื่อใช้ PNG คุณสามารถบรรลุเทคนิคที่คล้ายกัน แต่มีข้อดีบางประการในรูปแบบของการป้องกันนามแฝงและความโปร่งใสบางส่วนสำหรับใช้ในไอคอนที่มีรายละเอียดมากขึ้น

โอเค แต่สิ่งนี้ใช้ได้กับเบราว์เซอร์ใดบ้าง

ฉันรู้ว่าคุณกำลังคิดอะไร: ความโปร่งใส PNG ทั้งหมดนี้ดูดี แต่ใช้งานได้จริงไหม

ข่าวดีก็คือเบราว์เซอร์สมัยใหม่ทั้งหมดรองรับรูปภาพ PNG อย่างสมบูรณ์ รวมถึงความโปร่งใสของช่องอัลฟ่า ซึ่งข้อดีที่ฉันแสดงให้เห็นในตัวอย่าง Safari (ทุกเวอร์ชัน), Firefox (ทุกเวอร์ชัน), Opera (เวอร์ชัน 6 ขึ้นไป), Netscape (เวอร์ชัน 6 ขึ้นไป) และ Mozilla (ทุกเวอร์ชัน) จะทำทุกอย่างที่ฉันขอให้พวกเขาทำ แต่มีข่าวร้ายอย่างหนึ่ง - เบราว์เซอร์เดียวที่ฉันยังไม่ได้กล่าวถึงและผู้ใช้ส่วนใหญ่ของคุณมี: Internet Explorer

Internet Explorer 6 และต่ำกว่าไม่รองรับความโปร่งใสของช่องอัลฟาที่สร้างในรูปแบบ PNG นับตั้งแต่ที่ตัวเลือกเบราว์เซอร์ (หรือไม่มีตัวเลือก) ถูกสร้างขึ้นสำหรับนักเล่นเว็บส่วนใหญ่ ช่องโหว่นี้ทำให้นักออกแบบเว็บไซต์อยู่ห่างจาก PNG แต่ด้วยการเปิดตัว Internet Explorer 7 เราได้รับการสนับสนุนอย่างเต็มที่สำหรับ PNG alpha ความโปร่งใสในเบราว์เซอร์หลักๆ ทั้งหมด อะไรต่อไป มีวิธีใดบ้างในการทำงานกับความโปร่งใสอัลฟ่า PNG ใน Internet Explorer 6 และต่ำกว่า ดังนั้นหากคุณต้องการใช้เอฟเฟกต์นี้ ไม่มีอะไรจะหยุดคุณได้ Internet Explorer 6 และเวอร์ชันก่อนหน้านั้นต้องการการดูแลเอาใจใส่มากกว่าที่จำเป็น แต่ก็เป็นไปได้อย่างแน่นอน

แฮ็กสำหรับ Internet Explorer: AlphaImageLoader

Internet Explorer มาพร้อมกับตัวกรองเนทิฟต่างๆ ใช้ใน CSS แต่ไม่ได้เป็นส่วนหนึ่งของข้อกำหนด CSS อย่างเป็นทางการ กล่าวอีกนัยหนึ่ง พวกเขาไม่ได้มาตรฐานบนเว็บ น่าเสียดายที่ Internet Explorer 6 และต่ำกว่าไม่รองรับรูปแบบ PNG อย่างสมบูรณ์ (ซึ่ง W3C แนะนำ) แต่ Microsoft มีตัวกรองที่กำจัดข้อบกพร่องนี้: AlphaImageLoader

ตามส่วนในเว็บไซต์อย่างเป็นทางการของ Microsoft AlphaImageLoader "แสดงรูปภาพภายในขอบเขตของวัตถุและระหว่างพื้นหลังของวัตถุและเนื้อหา" กล่าวอีกนัยหนึ่ง AlphaImageLoader จะโหลดรูปภาพ PNG ที่มีความโปร่งใสเต็มที่ แต่จะโหลดเป็นเลเยอร์ของตัวเอง ซึ่งอยู่ข้างใต้ซึ่งเป็นเนื้อหาของออบเจ็กต์ที่จะนำไปใช้ รูปภาพ PNG ที่โหลดด้วยวิธีนี้จะมีลักษณะเหมือนภาพพื้นหลังมากกว่าภาพเบื้องหน้า (แม้ว่าจริงๆ แล้วรูปภาพจะ "นั่ง" อยู่บนพื้นหลังของวัตถุก็ตาม)

โดยพื้นฐานแล้ว คุณสามารถใช้ AlphaImageLoader ใน CSS กับองค์ประกอบ img และเพลิดเพลินไปกับผลลัพธ์ที่ได้ รูปภาพจะถูกโหลดก่อน ความโปร่งใสจะยังคงอยู่ แต่จากนั้นรูปภาพจะถูกโหลดอีกครั้ง โดยเป็นเนื้อหาด้านหน้าของวัตถุ โดยมีพื้นที่ทึบแสง (จึง "บัง" เวอร์ชันโปร่งใสของคุณ)

คุณไม่สามารถใช้ PNG แบบโปร่งใสเป็นภาพพื้นหลัง CSS สำหรับองค์ประกอบ (X)HTML (พูด) และคาดว่า AlphaImageLoader จะทำงานได้อย่างถูกต้องใน Internet Explorer โปรดจำไว้ว่า AlphaImageLoader จะแทรกรูปภาพของคุณระหว่างพื้นหลังและพื้นหน้าของวัตถุ ดังนั้น แม้ว่ามันจะโหลดรูปภาพของคุณด้วยความโปร่งใส แต่ก็ยังโหลดต่อไปเป็นภาพพื้นหลัง CSS และไม่มีพิกเซลโปร่งแสงที่ยอดเยี่ยมของคุณ

การใช้งาน AlphaImageLoader อย่างแท้จริง

กลับไปที่ตัวอย่างก่อนหน้านี้แล้วลองโหลดอย่างถูกต้องใน Internet Explorer จำช่อง 49 สถานีโทรทัศน์ในโทพีกาได้ไหม? ฉันแน่ใจว่าใช่ รูปที่ 5-21 แสดงลักษณะของไซต์ใน Internet Explorer 6

รูปที่ 5-21
พาดหัวข่าว 49abcnews.com แสดงผลใน Internet Explorer 6 สำหรับ Windows โดยมีความโปร่งใส PNG เหมือนเดิม

HTML สำหรับส่วนบนสุดของสภาพอากาศดูเหมือนว่าคุณอาจเดาได้แล้ว:

ปัจจุบันอยู่ที่โทพีกา รัฐแคนซัส:
82° มืดครึ้ม
รับพยากรณ์และอื่นๆ...

คุณเห็นภาพและแน่นอนว่าเป็น PNG แม้แต่ Internet Explorer ก็โหลดได้อย่างไม่มีที่ติ ส่วนผสมลับของสิ่งนี้คือ JavaScript จริงๆ แล้ว ฉันใช้สคริปต์ DOM เล็กน้อยเพื่อลบองค์ประกอบ img ทันทีและแทนที่ด้วยองค์ประกอบ div ที่คุณเดาได้ ใช้ AlphaImageLoader JavaScript ได้รับการอธิบายไว้ในความคิดเห็นแบบมีเงื่อนไข ซึ่งเป็นสำนวนที่มีประโยชน์แต่ไม่ได้มาตรฐานอย่างสมบูรณ์จาก Microsoft ที่มีอยู่ใน Internet Explorer ความคิดเห็นแบบมีเงื่อนไขอนุญาตให้คุณใช้โค้ดสำหรับ Internet Explorer เวอร์ชันที่รู้จักเท่านั้น เบราว์เซอร์อื่นๆ ทั้งหมดจะละเว้นโค้ดนี้ ดังนั้นจึงไม่มีผลกระทบใดๆ ทั้งสิ้น ในองค์ประกอบของเว็บไซต์ www.49abcnews.com คุณจะพบกับ:

ต้องขอบคุณบรรทัดแรก หากเป็น lte IE6 สคริปต์นี้จะรวมอยู่ในเอกสารที่แสดงผลก็ต่อเมื่อแสดงใน Internet Explorer เวอร์ชันที่น้อยกว่าหรือเท่ากับ (ระบุด้วย lte) 6. เบราว์เซอร์อื่น ๆ ทั้งหมด รวมถึง Internet Explorer 7 ที่เพิ่งมาใหม่จะเพิกเฉยต่อสิ่งนี้โดยสิ้นเชิง

แล้วไฟล์ JavaScript fixWeatherPng.js มีอะไรบ้าง ลองมาดูกัน:

Window.attachEvent("onload", fixWeatherPng); ฟังก์ชัน fixWeatherPng() ( var img = document.getElementById("weatherImage"); var src = img.src; img.style.visibility = "hidden"; var div = document.createElement("DIV"); div.style. filter = "progid:DXImageTransform.Microsoft.AlphaImageLoader(+ src + "", sizing="scale""); // สไตล์ CSS เฉพาะของ 49abcnews.com บางส่วนถูกละเว้นเพื่อความกระชับ img.replaceNode(div); )

มาวิเคราะห์ทีละขั้นตอนว่าสคริปต์ทำอะไร ขั้นแรก เราจะบอกเบราว์เซอร์ว่าเราต้องการเรียกใช้ฟังก์ชัน fixWeatherPng เมื่อโหลดหน้าเว็บ ส่วนที่เหลือของสคริปต์คือฟังก์ชันนั่นเอง

มาเริ่มกันก่อนอื่นเรามองหารูปภาพที่เราจะใช้แอตทริบิวต์ id และบันทึกไว้ในตัวแปร img เราบันทึกแอตทริบิวต์ src (URL ไปยังไฟล์รูปภาพ) ไว้ในตัวแปร src จากนั้นเราจะซ่อนองค์ประกอบ img โดยตั้งค่าคุณสมบัติการมองเห็น CSS เป็นซ่อน

ด้วยเหตุนี้ เราจึงแทนที่องค์ประกอบ img ดั้งเดิม (ซึ่งซ่อนอยู่) ด้วยองค์ประกอบ div ที่สร้างขึ้นใหม่ ซึ่งแนบ AlphaImageLoader ได้สำเร็จ

การใช้สคริปต์ DOM เพื่อแทรก AlphaImageLoader ของคุณ - การกรองบิตทันที - มีข้อเสียที่น่าเกลียด แต่จำเป็น - CSS ไม่ถูกต้อง นอกจากนี้ นอกเหนือจากมาร์กอัป (X)HTML ของคุณแล้ว จะมีองค์ประกอบ div ที่ไม่ใช่ความหมาย และตราบใดที่อธิบายทั้งหมดนี้ไว้ในความคิดเห็นแบบมีเงื่อนไข ก็ไม่มีโอกาสที่เบราว์เซอร์อื่นจะเสียหายจากโค้ดของ Microsoft (handyblogger: ที่นี่ Jeff กำลังพยายามชี้ให้เห็นโซลูชัน "งุ่มง่าม") ของ Microsoft อย่างละเอียด)

หากคุณต้องทำบางอย่างไม่ถูกต้อง อย่างน้อยคุณก็สามารถแยกมันออกมาและแยกมันออกจากทุกสิ่งที่ไม่จำเป็นได้

อยู่ในความควบคุมตัว

PNG เป็นรูปแบบกราฟิกที่มีข้อได้เปรียบทางเทคนิคมากมาย นอกเหนือจากที่ใช้ใน GIF ทั่วไป ในความเป็นจริง มีข้อดีมากมายจน PNG สามารถครองตำแหน่งที่โดดเด่นในฐานะรูปแบบกราฟิกที่ไม่ใช่ภาพถ่ายมานานแล้ว การที่ Internet Explorer ขาดการสนับสนุนคุณลักษณะที่สำคัญบางอย่างของ PNG เช่น ความโปร่งใสของช่องอัลฟ่า ส่งผลให้นักพัฒนาเว็บจำนวนมากต้องหยุดชะงัก แต่มีสองเหตุผลที่ดีว่าทำไมคุณไม่ควรกลัว PNG

ประการแรก: แม้แต่ Internet Explorer 6 และเวอร์ชันก่อนหน้าก็รองรับ PNG เกือบทั้งหมดในลักษณะที่ GIF สามารถทำได้ (ยกเว้นแอนิเมชั่นแน่นอน) PNG มักจะสร้างไฟล์ขนาดเล็กลง ทำให้โหลดเร็วขึ้นและใช้ทรัพยากรน้อยลง

ประการที่สอง: Internet Explorer 7 ให้การสนับสนุน PNG alpha โปร่งใสอย่างเต็มที่ เอฟเฟ็กต์ที่สามารถทำได้ด้วยตัวเลือกโปร่งแสงครบวงจรนั้นแทบจะไร้ขีดจำกัด ฉันคาดหวังว่าสำหรับนักออกแบบที่ค้นพบวิธีที่น่าสนใจในการใช้ความโปร่งใส PNG เช่นเดียวกับที่อธิบายไว้ในบทความนี้ ประตูจะถูกเปิดออกสู่ระดับใหม่ของสไตล์ที่ไม่เคยเห็นมาก่อน ฉันได้ให้แนวคิดที่เป็นประโยชน์เกี่ยวกับสิ่งที่คุณสามารถสร้างด้วยความโปร่งใส PNG ได้ แต่อย่าหยุดเพียงแค่นั้น มองหาตัวเอง!

ตัดตอนมาจากความคิดสร้างสรรค์มาตรฐานเว็บโดย Cameron Adams, Mark Boulton, Andy Clarke, Simon Collison, Jeff Croft, Ethan Marcotte, Derek Featherstone, Ian Lloyd, Dan Rubin และ Rob Weychert; เผยแพร่โดยเพื่อนของ ED ลิขสิทธิ์ Jeff Croft 2007 ใช้โดยได้รับอนุญาตจาก Apress, Inc.

โปรแกรมออนไลน์ Pixir - สร้างพื้นหลังโปร่งใสสำหรับรูปภาพ เซอร์เกย์ เฟสชูคอฟ

บางครั้งคุณเจอรูปภาพที่เหมาะสมมากสำหรับโพสต์ของคุณและทุกอย่างจะดี... แต่พื้นหลังของรูปภาพไม่ตรงกับพื้นหลังของบล็อกหรือบล็อกที่มีข้อความ เห็นได้ชัดว่าไม่มีใครประสบปัญหานี้และไม่มีใครมีพื้นหลังสีขาวซึ่งจะเหมาะสมในกรณีส่วนใหญ่ ฉันต้องการพื้นหลังที่โปร่งใส!

ฉันไม่พบแนวคิดดีๆ บนอินเทอร์เน็ตเกี่ยวกับวิธีสร้างพื้นหลังโปร่งใสสำหรับภาพที่เสร็จแล้ว ดังนั้นฉันจึงเริ่มทดลองด้วยตัวเองและพบวิธีแก้ปัญหาที่เหมาะสมไม่มากก็น้อย!

วิธีทำพื้นหลังโปร่งใสให้กับรูปภาพ

มาดูตัวอย่างรูปภาพง่ายๆ ในรูปแบบ .jpg (โดยทั่วไป รูปแบบนี้ไม่สำคัญเป็นพิเศษ):

มีพื้นหลังสีขาวที่นี่ซึ่งฉันต้องการกำจัดออกและสร้างพื้นหลังโปร่งใสแทน Photoshop เวอร์ชันออนไลน์จะช่วยเราในเรื่องนี้

กำลังอัพโหลดรูปภาพของเรา ทางด้านขวาในหน้าต่าง "เลเยอร์" เลเยอร์ "พื้นหลัง" จะปรากฏขึ้นซึ่งมีการล็อคอยู่ (ป้องกันไม่ให้ลบพื้นหลังของรูปภาพ)

ด้วยการดับเบิลคลิกด้วยปุ่มซ้ายของเมาส์บนล็อคนี้ คุณสามารถลบล็อคออกจากพื้นหลังได้ เครื่องหมายถูกจะปรากฏขึ้นแทนรูปแม่กุญแจ

ตอนนี้ใช้ไม้กายสิทธิ์ (แถบเครื่องมือ คอลัมน์ด้านขวา ปุ่มที่สองจากด้านบน) ระบุพารามิเตอร์ต่อไปนี้: ความอดทน = 21 ช่องทำเครื่องหมายสำหรับการปรับให้เรียบและความต่อเนื่อง(โดยปกติแล้วพารามิเตอร์ดังกล่าวจะเป็นมาตรฐาน) แม้ว่าคุณจะสามารถทดลองกับพารามิเตอร์ได้ก็ตาม และคลิกที่พื้นหลังของรูปภาพ (ในกรณีของเราคือบนพื้นหลังสีขาว)

ตอนนี้เราลบพื้นหลังโดยกดปุ่ม "ลบ" และรับภาพที่เราต้องการด้วยพื้นหลังโปร่งใส

ผลลัพธ์ที่ได้จึงเป็นภาพเดียวกันที่มีพื้นหลังโปร่งใส

ข้อเสียประการเดียวของ Pixlr คือ คุณไม่สามารถบันทึกรูปภาพในรูปแบบ .gif ได้ ซึ่งจะคงพื้นหลังโปร่งใสไว้ แต่จะเบากว่ารูปแบบ .png มาก แต่ถ้าไม่มีทางเลือกอื่นทำไมไม่ใช้ประโยชน์จากสิ่งนี้ล่ะ?

ขอบคุณ Natalia Petrova

วันนี้ฉันตัดสินใจขยับออกห่างจากหัวข้อการเขียนโค้ดเล็กน้อยและพูดคุยเกี่ยวกับการออกแบบเล็กน้อย แม้ว่าการออกแบบจะมีบทบาทสำคัญในการสร้างเว็บไซต์ แต่ฉันไม่ได้เป็นเพื่อนกับการวาดภาพ กราฟิก และการออกแบบมาตั้งแต่เด็ก ดังนั้นฉันจึงค้นหารูปภาพในโพสต์ของฉัน เช่นเดียวกับบล็อกเกอร์หลายๆ คน ในอินเทอร์เน็ต โดยใช้คลังรูปภาพและคลังรูปภาพฟรี

ดังนั้นบางครั้งคุณอาจพบรูปภาพที่เหมาะสมมากสำหรับโพสต์ของคุณและทุกอย่างจะดี... แต่พื้นหลังของรูปภาพไม่ตรงกับพื้นหลังของบล็อกหรือบล็อกที่มีข้อความ เห็นได้ชัดว่าไม่มีใครประสบปัญหานี้และไม่มีใครมีพื้นหลังสีขาวซึ่งจะเหมาะสมในกรณีส่วนใหญ่ ฉันต้องการพื้นหลังที่โปร่งใส!

วิธีทำพื้นหลังโปร่งใสให้กับรูปภาพ

มีพื้นหลังสีขาวที่นี่ซึ่งฉันต้องการกำจัดออกและสร้างพื้นหลังโปร่งใสแทน Pixlr ซึ่งเป็น Photoshop เวอร์ชันออนไลน์จะช่วยเราในเรื่องนี้

อ่านด้วย