เมธอด getImageData() ส่งคืนวัตถุ ImageData ซึ่งคัดลอกข้อมูลพิกเซลของสี่เหลี่ยมที่ระบุของผืนผ้าใบ
หมายเหตุ: วัตถุ ImageData ไม่ใช่รูปภาพ โดยระบุส่วน (สี่เหลี่ยมผืนผ้า) ของผืนผ้าใบและบันทึกข้อมูลของแต่ละพิกเซลภายในสี่เหลี่ยม
สำหรับแต่ละพิกเซลในออบเจ็กต์ ImageData จะมีข้อมูลสี่ด้าน ได้แก่ ค่า RGBA:
A - ช่องอัลฟ่า (0-255; 0 โปร่งใส, 255 มองเห็นได้เต็มที่)
ข้อมูลสี/อัลฟ่ามีอยู่ในรูปแบบของอาร์เรย์และจัดเก็บไว้ในแอตทริบิวต์ data ของออบเจ็กต์ ImageData
เคล็ดลับ: หลังจากดำเนินการกับข้อมูลสี/อัลฟ่าในอาร์เรย์ คุณสามารถใช้เมธอด putImageData() เพื่อคัดลอกข้อมูลรูปภาพกลับไปยังแคนวาส
สองรหัส <!DOCTYPE html><html><head> <meta name=author content=Yeeku.H.Lee(CrazyIt.org) /> <meta http-equiv=Content-Type content=text/html; <title> เปลี่ยนความโปร่งใส</title></head><body><h2> เปลี่ยนความโปร่งใส</h2><canvas id=mc width=600 height=460 style=border:1px solid black></canvas><script type=text/javascript> // รับวัตถุ DOM ที่สอดคล้องกับองค์ประกอบผ้าใบ var canvas = document.getElementById('mc'); // รับวัตถุ CanvasRenderingContext2D สำหรับการวาดภาพบนผืนผ้าใบ var ctx = canvas.getContext('2d'); var image = รูปภาพใหม่ (); image.src = test.png; ใช้วิธีการที่มีพารามิเตอร์ความโปร่งใสในการวาดภาพ DrawImage(image, 124, 20, 0.4); } var DrawImage = function(image, x, y, alpha) { // วาดภาพ ctx.drawImage(image, x, y) ); / / รับข้อมูลรูปภาพเริ่มต้นจาก x, y โดยมีความกว้างของ image.width และความสูงของ image.height // นั่นคือรับข้อมูลรูปภาพที่วาด var imgData = ctx.getImageData(x, y, image.width, image.height); for (var i = 0, len = imgData.data.length; i < len; i += 4) { // เปลี่ยนความโปร่งใสแต่ละพิกเซล imgData.data[i + 3] = imgData.data[i + 3] * alpha; } // ใส่ข้อมูลรูปภาพที่ได้รับกลับคืน ctx.putImageData(imgData, x, y); </script></body></html> ผลการวิ่งสามรายการข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network