ກົນລະບຽບ HTML canvas getImageData()

ປື້ມການປົກຄອງ HTML5 Canvas

ການສະເໜີ ແລະ ການນໍາໃຊ້

getImageData() ກົນລະບຽບທີ່ຈະກັບຄືນຂໍ້ມູນວິດີໂອສູ່ແຜ່ນງານຕາມບົດສະຫຼຸບ.

ສຳລັບແຕ່ລະປີຈອງໃນວິດີໂອ ImageData, ມີສີ່ບັນຫາຂໍ້ມູນRGBA:

  • R - ສີສີແດງ (0-255)
  • G - ສີສີຂຽວ (0-255)
  • B - ສີຟ້າ (0-255)
  • A - alpha ແຊັກ (0-255; 0 ແມ່ນທີ່ບາງເລື່ອງ, 255 ແມ່ນທີ່ສະແດງໄດ້ເທົ່າໃຫຍ່)

color/alpha ມີຕົວເລກຈາກລະຫວ່າງ 0-255 ແລະຖືກຮັກສາໃນວິດີໂອ ImageData. data ປະສົງອາກາດ.

ຄຳແນະນຳ:ຫຼັງຈາກການປະຕິບັດຄວາມຂອງວິດີໂອ color/alpha ໃນລະຫວ່າງສາຍລະຫວ່າງ color/alpha putImageData() ກົນລະບຽບທີ່ຈະກຳນວນຂໍ້ມູນວິດີໂອຫຼັງຈາກທີ່ຖືກຄົ້ນພົບ.

ຕົວຢ່າງ:

ການກວດກາວິດີໂອນັບສິ່ງລາຍລະອຽດທີ່ຖືກກັບຄືນສູ່ແຜ່ນງານ.

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;

（ບໍ່ມີການທຳການທີ່ຢູ່ບັນດາຕົວຢ່າງໃນລາວ.）

ຕົວຢ່າງ

ຕົວຢ່າງ 1

ລະບຽບທີ່ລາວທີ່ລົງໃນບົດສະຫຼຸບທີ່ລົງໃນຕົວແທນຂອງບົດສະຫຼຸບ, ເພື່ອການຂີ້ຂຽນຂອງພາບຂອງບົດສະຫຼຸບ, ແລະ ເພື່ອລົງມາໃນບົດສະຫ�ຸບອີກ.

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);
}

ທ້າວທີ່ທົດສອບ

ຄຳແນະນຳ:ຫຼາຍຕົວຢ່າງອີກໃນຕາໃສ່ບົດສະຫຼຸບ.

ວິທິດ

var imgData=context.getImageData(x,y,width,height);

ຄວາມຕ້ອງການ

ປະເພດ ອະທິບາຍ
x ສະຖານະ x ຂອງບາງປະກອບທີ່ຈະເລີ່ມສໍາເນົາ.
y ສະຖານະ y ຂອງບາງປະກອບທີ່ຈະເລີ່ມສໍາເນົາ.
width ຄວາມກວມທີ່ຈະສໍາເນົາ.
height ຄວາມສູງຂອງດັນປະກອບທີ່ຈະສໍາເນົາ.

ຫຼາຍຕົວຢ່າງອີກ

ຕົວຢ່າງ 2

ພາບທີ່ຈະໃຊ້:

The Tulip

ນຳໃຊ້ getImageData() ເພື່ອລະບາຍສີຂອງຕົວຄຳທີ່ຢູ່ໃນໜ້າເບີໂທລະບາຍ.

ບັນດາຄອມມິສູບຂອງທ່ານບໍ່ສາມາດສະໜັບສະໜູນຕົວແທນ HTML5 canvas ບໍ່.

JavaScript:

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
var img=document.getElementById("tulip");
ctx.drawImage(img,0,0);
var imgData=ctx.getImageData(0,0,c.width,c.height);
// ການລະບາຍສີ
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);

ທ້າວທີ່ທົດສອບ

ການສະໜັບສະໜູນບັນດາສະມາຊິກ

ຈຳນວນໃນຕາລາງທີ່ກ່າວອອກວ່າບັນດາສະມາຊິກທີ່ເປັນກໍານົດທຳອິດທີ່ເປັນການສະໜັບສະໜູນປະສົມປະສານດັ່ງກ່າວ.

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
4.0 9.0 3.6 4.0 10.1

ຄວາມເຫັນ:Internet Explorer 8 ແລະອັນດັບກ່ວາບໍ່ສາມາດສະໜັບສະໜູນ <canvas> ສະມາຊິກ.

ປື້ມການປົກຄອງ HTML5 Canvas