รู้เบื้องต้นเกี่ยวกับอินเทอร์เฟซสำหรับการใช้การประมวลผลพิกเซล HTML5 Canvas Pixel

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

1. การเติมภาพผืนผ้าใบ; 2. SET/รับข้อมูลภาพ Canvas; 3. สร้างข้อมูลภาพผืนผ้าใบ 4. อาหารเสริมเล็กน้อยถึง imagedata.data; 5. เขียนในภายหลัง

-

* @คำอธิบาย

* @param {number} x ระยะทางจากจุดซ้ายสุดของภาพจุดเริ่มต้นการวาดภาพจากผืนผ้าใบ

* @param {number} y ระยะห่างระหว่างจุดเริ่มต้นของการวาดภาพจากด้านบนของผืนผ้าใบ

* @param {number} ความกว้างความกว้างของภาพสุดท้ายที่วาดบนผืนผ้าใบ

* @param {number} ความสูงความสูงของภาพสุดท้ายที่วาดบนผืนผ้าใบ

-

context.drawimage (ภาพ, x, y, ความกว้าง, ความสูง)

DEMO_01 มีดังนี้:

<canvas id = draw_image_canvas style = background: #ccc;> </anvas>

ฟังก์ชั่น $ (id) {return document.getElementById (id); -

ฟังก์ชั่น getImage (url, callback) {

var img = document.createElement ('img');

img.onload = function () {

การโทรกลับ && การโทรกลับ (นี่);

-

img.src = url;

document.body.appendchild (IMG);

-

ฟังก์ชั่น drawimage () {

var url = 'xiangjishi.png';

var canvas = $ ('draw_image_canvas');

var context = canvas.getContext ('2d');

getImage (url, function (img) {

canvas.width = img.width;

canvas.height = img.height;

var Offsetx = 20;

var aftsety = 20;

var drawwidth = img.width/4;

var drawheight = img.height/4;

Context.DrawImage (IMG, OffsetX, Offsety, Drawwidth, Drawheight);

-

-

drawimage ();

คำอธิบายตัวอย่าง: โหลด Xiangjishi.png หลังจากโหลดแล้วให้วาด Xiangjishi.png บนผืนผ้าใบเริ่มต้นจากพิกัด (0, 0) เทียบกับมุมซ้ายบนของผืนผ้าใบ เอฟเฟกต์มีดังนี้:

เมื่อเห็นสิ่งนี้คุณอาจไม่เข้าใจความหมายของพารามิเตอร์ทั้งสี่ในบริบท DRAWIMAGE (IMAGE, X, Y, ความกว้าง, ความสูง) คุณสามารถแก้ไขพารามิเตอร์สองสามตัวเพื่อดูเอฟเฟกต์:

var Offsetx = 20;

var aftsety = 20;

var drawwidth = img.width/2;

var drawheight = img.height/2;

Context.DrawImage (IMG, OffsetX, Offsety, Drawwidth, Drawheight);

เอฟเฟกต์การสาธิตที่ได้รับการแก้ไขมีดังนี้ เมื่อรวมกับคำอธิบาย API ด้านบนไม่ควรเข้าใจความหมายของพารามิเตอร์ทั้งสี่

context.drawimage (ภาพ, x, y, ความกว้าง, ความสูง)

-

* @description รับข้อมูลพิกเซลสำหรับพื้นที่เฉพาะของผ้าใบ

* @param {number} x ระยะทางจากจุดซ้ายสุดของข้อมูลเพื่อให้ได้ระยะห่างจากผืนผ้าใบ

* @param {number} y ระยะเริ่มต้นจากด้านบนของผืนผ้าใบสำหรับข้อมูล

* @param {number} ความกว้างความกว้างที่ได้รับ

* @param {number} ความสูงความสูงสุดท้าย

-

context.getimagedata (x, y, ความกว้าง, ความสูง)

วิธีนี้ส่งคืนวัตถุ Imagedata ซึ่งมีคุณสมบัติหลักสามประการ:

imagedata.width: มีกี่องค์ประกอบต่อบรรทัด

Imagedata.height: มีองค์ประกอบกี่องค์ประกอบต่อคอลัมน์

Imagedata.data: อาร์เรย์หนึ่งมิติที่เก็บค่า RGBA ของแต่ละพิกเซลที่ได้จากผ้าใบ อาร์เรย์นี้จะประหยัดค่าสี่ค่าสำหรับแต่ละพิกเซล - สีแดง, เขียว, น้ำเงิน, สีน้ำเงินและอัลฟ่า แต่ละค่าอยู่ระหว่าง 0 ถึง 255 ดังนั้นแต่ละพิกเซลบนผืนผ้าใบจะกลายเป็นค่าจำนวนเต็มสี่ค่าในอาร์เรย์นี้ ลำดับการเติมอาร์เรย์มาจากซ้ายไปขวาจากบนลงล่าง

-

* @description ตั้งค่าข้อมูลพิกเซลของพื้นที่เฉพาะด้วย imagedata เฉพาะ

* @param {number} x เริ่มต้นการตั้งค่าจากจุด X ของผ้าใบ

* @param {number} y เริ่มการตั้งค่าจากจุด y ของผ้าใบ

* @param {number} ความกว้างความกว้างที่ได้รับ

* @param {number} ความสูงความสูงสุดท้าย

-

Context.putimagedata (imagedata, x, y)

ต่อไปนี้คือการรวม demo_2 เพื่ออธิบายการใช้งานของ getImagedata () และความหมายที่สอดคล้องกันของแต่ละพารามิเตอร์

ซอร์สโค้ด DEMO_02 มีดังนี้และมีการแก้ไขเล็กน้อยตาม DEMO_01:

<canvas id = "draw_image_canvas" style = "พื้นหลัง: #cc;"> </anvas>

<canvas id = "get_image_canvas" style = "พื้นหลัง: #cc;"> </anvas>

ฟังก์ชั่น getandsetimagedata () {

var url = 'xiangjishi.png';

getImage (url, function (img) {

$ ('draw_image_canvas'). width = img.width;

$ ('draw_image_canvas'). ความสูง = img.height;

var context = $ ('draw_image_canvas'). getContext ('2d');

Context.DrawImage (img, 0, 0, img.width, img.height);

// รับข้อมูลพิกเซล

var Offsetx = img.width/2;

var Offsety = img.height/2;

var getimgwidth = img.width/2;

var getimgheight = img.height/2;

var imgagedata = context.getImagedata (Offsetx, Offsety, Getimgwidth, Getimgheight);

// ตั้งค่าข้อมูลพิกเซลละเว้นรหัสเฉพาะที่นี่ก่อนรู้ว่าข้อมูลพิกเซลที่ได้รับข้างต้นถูกวางไว้ในผืนผ้าใบอื่นเหมือนเดิม

var startx = 0;

var starty = 0;

var ct = $ ('get_image_canvas'). getContext ('2d');

$ ('get_image_canvas'). width = img.width;

$ ('get_image_canvas'). ความสูง = img.height;

ct.putimagedata (imgagedata, startx, starty);

-

-

ณ จุดนี้ความหมายที่สอดคล้องกับพารามิเตอร์ทั้งสี่ของวิธี getImagedata สามารถล้างได้โดยทั่วไป ไม่ยากที่จะเข้าใจพารามิเตอร์ Putimagedata หลังจากแก้ไขรหัส DEMO_2 เล็กน้อยคุณจะรู้หลังจากดูเอฟเฟกต์

ฟังก์ชั่น getandsetimagedata () {

var url = 'xiangjishi.png';

getImage (url, function (img) {

$ ('draw_image_canvas'). width = img.width;

$ ('draw_image_canvas'). ความสูง = img.height;

var context = $ ('draw_image_canvas'). getContext ('2d');

Context.DrawImage (img, 0, 0, img.width, img.height);

// รับข้อมูลพิกเซล

var Offsetx = img.width/2;

var Offsety = img.height/2;

var getimgwidth = img.width/2;

var getimgheight = img.height/2;

var imgagedata = context.getImagedata (Offsetx, Offsety, Getimgwidth, Getimgheight);

// ตั้งค่าข้อมูลพิกเซล

var startx = img.width/2; // นี่คือ 0

var starty = img.width/2; // นี่คือ 0

var ct = $ ('get_image_canvas'). getContext ('2d');

$ ('get_image_canvas'). width = img.width;

$ ('get_image_canvas'). ความสูง = img.height;

ct.putimagedata (imgagedata, startx, starty);

-

-

เอฟเฟกต์การแสดงผล DEMO_3 มีดังนี้ แต่ถ้าคุณพยายามเปลี่ยนพารามิเตอร์บางอย่างด้วยตัวคุณเองคุณอาจมีความเข้าใจที่ดีขึ้น:

-

* @description ล่วงหน้าสร้างชุดข้อมูลภาพและผูกไว้กับวัตถุ Canvas

* @param {number} ความกว้างที่สร้างขึ้นโดยความกว้าง

* @param {number} ความสูงที่สร้างขึ้น

-

context.createimagedata (ความกว้างความสูง)

อินเทอร์เฟซนั้นค่อนข้างง่ายและข้อมูลที่สร้างขึ้นสามารถประมวลผลได้เช่นเดียวกับข้อมูลที่ได้จาก getImagedata จำเป็นต้องมีการบันทึกไว้ที่นี่ว่าชุดข้อมูลภาพนี้อาจไม่จำเป็นต้องสะท้อนสถานะปัจจุบันของผ้าใบ

นอกจากนี้ใน "HTML5 Advanced Programming" และบทความมากมาย imagedata.data ถือเป็นอาร์เรย์ แต่ในความเป็นจริง: ในความเป็นจริง:

imagedata.data ไม่คืนอาร์เรย์จริง แต่เป็นวัตถุของอาร์เรย์คลาสซึ่งสามารถพิมพ์ประเภทของ imagedata.data

console.log (object.prototype.tostring.call (imgagedata.data)); // เอาท์พุท: [Object Uint8ClampedArray]

จากนั้นพิมพ์เนื้อหาเฉพาะของ imagedata.data เนื้อหายาว สามารถมองเห็นย่อหน้าแรกและครั้งสุดท้ายได้เท่านั้น:

Imagedata.data เป็นวัตถุที่ดัชนีเริ่มต้นจาก 0 และจบลงด้วยความกว้าง*ความสูง*4-1

ทำไมไม่เก็บไว้ในอาร์เรย์โดยตรง? เนื่องจากความยาวของอาร์เรย์มีขีด จำกัด บนสมมติว่าเป็นขีด จำกัด องค์ประกอบที่เกินขีด จำกัด จะถูกเก็บไว้ในค่าคีย์ ตัวอย่างเช่นข้อมูล [LimitLength + 100] เป็นข้อมูล ['LimitLength + 100 +' '] (ฉันจำไม่ได้ว่าค่าเฉพาะของ LimitLength หากคุณสนใจคุณสามารถตรวจสอบได้)

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

ระดับ จำกัด โปรดชี้ให้เห็นว่ามีข้อผิดพลาดใด ๆ