ผ้าใบ HTML getImageData () วิธีการ
คู่มือการใช้งาน HTML ผ้าใบอ้างอิง
ตัวอย่าง
getImageData รหัสต่อไปนี้ () คัดลอกข้อมูลบนผืนผ้าใบรูปสี่เหลี่ยมผืนผ้าพิกเซลที่กำหนดและ () ข้อมูลภาพกลับเข้ามาในผืนผ้าใบโดย putImageData นี้:
var ctx=c.getContext("2d");
ctx.fillStyle="red";
ctx.fillRect(10,10,50,50);
function copy()
{
var imgData=ctx.getImageData(10,10,50,50);
ctx.putImageData(imgData,10,70);
}
ลอง»
สนับสนุนเบราว์เซอร์
Internet Explorer 9, Firefox, Opera, Chrome และ Safari getImageData สนับสนุน () วิธีการ
หมายเหตุ: 8 และก่อนหน้านี้ nternet Explorer ไม่สนับสนุน <ผ้าใบ> องค์ประกอบ
ความหมายและการใช้งาน
getImageData () วิธีการส่งกลับวัตถุ ImageData ว่าเป็นสำเนาของข้อมูลพิกเซลสี่เหลี่ยมผืนผ้าใบที่ระบุไว้
หมายเหตุ: วัตถุ ImageDataไม่ได้เป็นภาพซึ่งมีส่วนหนึ่งของผืนผ้าใบ (สี่เหลี่ยมผืนผ้า) และบันทึกไว้ในข้อมูลสี่เหลี่ยมผืนผ้าของแต่ละพิกเซล
ImageData วัตถุแต่ละพิกเซลมีสี่ด้านของข้อมูล ได้แก่ ค่า RGBA:
R - สีแดง (0-255)
G - กรีน (0-255)
B - สีฟ้า (0-255)
เอ - ช่องอัลฟา (0-255; 0 โปร่งใส 255 จะมองเห็นได้อย่างเต็มที่)
สี / อัลฟาข้อมูลในรูปแบบของอาร์เรย์และเก็บไว้ใน ImageData วัตถุ ข้อมูล คุณสมบัติ
เคล็ดลับ: อาร์เรย์ที่สมบูรณ์ของข้อมูลสี / อัลฟาในการดำเนินงานคุณสามารถใช้ putImageData () วิธีการของข้อมูลภาพจะถูกคัดลอกกลับไปยังผืนผ้าใบ
ตัวอย่าง:
รหัสต่อไปนี้อาจจะได้รับวัตถุ ImageData ถูกส่งกลับในข้อมูลสี / อัลฟาพิกเซล:
green=imgData.data[1];
blue=imgData.data[2];
alpha=imgData.data[3];
เคล็ดลับ: คุณยังสามารถใช้ getImageData () วิธีการที่จะกลับสีของพิกเซลของภาพแต่ละบนผืนผ้าใบ
ใช้สูตรนี้ผ่านพิกเซลทั้งหมดและเปลี่ยนค่าสีของมัน:
green=255-old_green;
blue=255-old_blue;
ดูต่อไปนี้ "ลอง" อินสแตนซ์!
ไวยากรณ์ JavaScript
| ไวยากรณ์ javascript: | บริบท .getImageData (x, y, ความกว้างความสูง); |
|---|
ค่าพารามิเตอร์
| 参数 | 描述 |
|---|---|
| x | 开始复制的左上角位置的 x 坐标（以像素计）。 |
| y | 开始复制的左上角位置的 y 坐标（以像素计）。 |
| width | 要复制的矩形区域的宽度。 |
| height | 要复制的矩形区域的高度。 |
ตัวอย่างเพิ่มเติม
ภาพที่คุณต้องการใช้:
ตัวอย่าง
ใช้ getImageData () เพื่อย้อนกลับสีของพิกเซลของภาพบนผืนผ้าใบแต่ละ:
javascript:
var ctx=c.getContext("2d");
var img=document.getElementById("scream");
ctx.drawImage(img,0,0);
var imgData=ctx.getImageData(0,0,c.width,c.height);
// invert colors
for (var i=0;i<imgData.data.length;i+=4)
{
imgData.data[i]=255-imgData.data[i];
imgData.data[i+1]=255-imgData.data[i+1];
imgData.data[i+2]=255-imgData.data[i+2];
imgData.data[i+3]=255;
}
ctx.putImageData(imgData,0,0);
ลอง»
คู่มือการใช้งาน HTML ผ้าใบอ้างอิง