ข้อมูลอ้างอิงHTML

HTML โดยตัวอักษร HTML ตามหมวดหมู่ รองรับ HTML Browser แอตทริบิวต์ HTML HTML Global Attributes เหตุการณ์ HTML HTML สี HTML Canvas HTML เสียง/วิดีโอ ชุดอักขระ HTML HTML Doctypes การเข้ารหัส URL HTML รหัสภาษา HTML รหัสประเทศ HTML ข้อความ HTTP วิธี HTTP ตัวแปลง PX เป็น EM แป้นพิมพ์ลัด


HTML canvas getImageData() Method

❮ การอ้างอิงผ้าใบ HTML

ตัวอย่าง

โค้ดด้านล่างคัดลอกข้อมูลพิกเซลสำหรับสี่เหลี่ยมที่ระบุบนผืนผ้าใบด้วย getImageData() จากนั้นใส่ข้อมูลรูปภาพกลับลงบนผืนผ้าใบด้วย putImageData():

var c = document.getElementById("myCanvas");
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);
}

รองรับเบราว์เซอร์

ตัวเลขในตารางระบุเบราว์เซอร์รุ่นแรกที่รองรับวิธีการนี้อย่างเต็มที่

Method
getImageData() Yes 9.0 Yes Yes Yes

ความหมายและการใช้งาน

เมธอด getImageData() ส่งคืนออบเจ็กต์ ImageData ที่คัดลอกข้อมูลพิกเซลสำหรับสี่เหลี่ยมที่ระบุบนผืนผ้าใบ

หมายเหตุ:วัตถุ ImageData ไม่ใช่รูปภาพ แต่ระบุส่วนหนึ่ง (สี่เหลี่ยมผืนผ้า) บนผืนผ้าใบ และเก็บข้อมูลของทุกพิกเซลภายในสี่เหลี่ยมผืนผ้านั้น

สำหรับทุกพิกเซลในวัตถุ ImageData มีข้อมูลสี่ส่วน ค่า RGBA:

R - สีแดง (จาก 0-255)
G - สีเขียว (จาก 0-255)
B - สีฟ้า (จาก 0-255)
A - The alpha channel (จาก 0-255; 0 โปร่งใสและ 255 คือ มองเห็นได้อย่างเต็มที่)

ข้อมูลสี/อัลฟาอยู่ในอาร์เรย์ และจัดเก็บไว้ใน คุณสมบัติ ข้อมูลของออบเจกต์ ImageData

เคล็ดลับ:หลังจากที่คุณจัดการข้อมูลสี/อัลฟาในอาร์เรย์แล้ว คุณสามารถคัดลอกข้อมูลรูปภาพกลับเข้าสู่ผืนผ้าใบโดยใช้เมธอดputImageData()

ตัวอย่าง:

รหัสสำหรับรับข้อมูลสี/อัลฟาของพิกเซลแรกในวัตถุ ImageData ที่ส่งคืน:

red=imgData.data[0];
green=imgData.data[1];
blue=imgData.data[2];
alpha=imgData.data[3];

เคล็ดลับ:คุณยังสามารถใช้เมธอด getImageData() เพื่อเปลี่ยนสีของทุกพิกเซลของรูปภาพบนผืนผ้าใบได้

วนซ้ำพิกเซลทั้งหมดและเปลี่ยนค่าสีโดยใช้สูตรนี้:

red=255-old_red;
green=255-old_green;
blue=255-old_blue;

ดูตัวอย่าง "ลองใช้เอง" ด้านล่าง!


JavaScript Syntax

ไวยากรณ์ JavaScript: บริบท .getImageData( x,y,ความกว้าง,ความสูง );

ค่าพารามิเตอร์

Parameter Description
x The x coordinate (in pixels) of the upper-left corner to start copy from
y The y coordinate (in pixels) of the upper-left corner to start copy from
width The width of the rectangular area you will copy
height The height of the rectangular area you will copy

ตัวอย่างเพิ่มเติม

ภาพที่จะใช้:

กรี๊ด

ตัวอย่าง

ใช้ getImageData() เพื่อเปลี่ยนสีของทุกพิกเซลของรูปภาพบนผืนผ้าใบ:

YourbrowserdoesnotsupporttheHTML5canvastag.

จาวาสคริปต์:

var c = document.getElementById("myCanvas");
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
var i;
for (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