การแสดงรูปภาพ:แบบพิกเซล

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

Chrome 41 (เบต้าในเดือนมกราคม 2015) เปิดตัวพร็อพเพอร์ตี้ CSS ใหม่ image-rendering: pixelated (ข้อกำหนด) ที่ให้คุณควบคุมวิธีที่เบราว์เซอร์แสดงภาพที่ขยายขนาดได้มากขึ้น

พร็อพเพอร์ตี้ CSS image-rendering และค่า pixelated น่าสนใจเนื่องจากปิดใช้การปรับขนาดที่ราบรื่นแบบมาตรฐานของเบราว์เซอร์ (ปกติการประมาณค่าเชิงเส้นแบบ 2 เส้น) และแทนที่ด้วยอัลกอริทึมการปรับขนาดอื่น (ข้างเคียงที่ใกล้ที่สุด) เมื่อปรับขนาดรูปภาพ

สมมติว่าคุณมีรูปภาพขนาด 2×2 พิกเซลและปรับขนาดได้สูงสุด 100×100 พิกเซล เบราว์เซอร์จะแสดงผลในลักษณะที่ไม่ดูเป็นบล็อก เช่น

การแสดงผลที่ราบรื่น

มีหลายกรณีที่คุณไม่ต้องการให้มีการปรับให้เรียบเนียนเช่นนี้ และพวกเขาใช้วิธีการที่รักษาการนำเสนอภาพที่ถูกต้องมากขึ้นแทน

หากต้องการได้เอฟเฟ็กต์นี้ เพียงใช้ image-rendering: pixelated; กับรูปภาพของคุณดังนี้

<img
    style="image-rendering: pixelated;"
    width="100" height="100"
    src="data:image/png;base64,iVBORw0KGgoAAAA....Ik2kAAAAASUVORK5CYII=">
การแสดงภาพแบบพิกเซล

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

พร็อพเพอร์ตี้นี้ใช้ได้ในหลายที่ ดังนี้

  • <img> องค์ประกอบ
  • <canvas style="image-rendering: pixelated"> องค์ประกอบ
  • องค์ประกอบที่มีพร็อพเพอร์ตี้ background-image

ยังไม่เข้าใจอยู่ดี ฉันควรใช้ที่ใด

หากเพียงแสดงรูปภาพในเว็บไซต์ของคุณ คุณอาจไม่ต้องการฟีเจอร์นี้

กรณีการใช้งานที่ยอดเยี่ยมคือเกมที่คุณจะต้องปรับขนาดผืนผ้าใบเพื่อให้มีขนาดพอดีกับหน้าจออย่างถูกต้องอยู่บ่อยๆ ก่อนหน้าคุณสมบัติ CSS นี้ เบราว์เซอร์จะทำการประมาณ Canvas ในลักษณะที่อาจเบลอ (ดูด้านล่าง [sic])

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

หากคุณสนใจที่จะดูการติดตั้งใช้งาน โปรดชําระเงินในปัญหา 317991 (เปิดทิ้งไว้สําหรับการติดตั้งใช้งานค่าขอบที่คมชัด ติดดาวปัญหาเพื่อติดตามการติดตั้งใช้งาน)