สอนวิธีใช้ Canvas ในการประมวลผลภาพ

Canvas ซึ่งแปลเป็นภาษาจีนว่า Canvas มีองค์ประกอบ <canvas> ใหม่ใน HTML5 ซึ่งสามารถใช้ร่วมกับ JavaScript เพื่อวาดกราฟิกบนผืนผ้าใบแบบไดนามิกได้

วันนี้เราจะไม่พูดถึงการวาดภาพกราฟิกใน Canvas แต่จะพูดถึงวิธีการประมวลผลรูปภาพอย่างไร

กระบวนการนี้อาจง่ายมาก และส่วนใหญ่แบ่งออกเป็นสามขั้นตอนต่อไปนี้:

ใช่ง่ายเหมือนเก็บช้างเข้าตู้เย็น555

Canvas API หลักที่ใช้ในกระบวนการทั้งหมดคือ:

1. วาดภาพ: DrawImage()
2. รับข้อมูลรูปภาพ: getImageData()
3. เขียนข้อมูลรูปภาพใหม่: putImageData()
4. ส่งออกรูปภาพ: toDataURL()

ตามชื่อที่แนะนำ วิธีนี้ใช้ในการวาดภาพบนผืนผ้าใบ Canvas มีการใช้งานเฉพาะสามประการ:

1. วางตำแหน่งรูปภาพบนผืนผ้าใบ: context.drawImage(img,x,y)

2 วางตำแหน่งรูปภาพบนผืนผ้าใบและระบุความกว้างและความสูงของรูปภาพ: context.drawImage(img,x,y,width,height)

3 ตัดภาพและวางตำแหน่งส่วนที่ตัดบนผืนผ้าใบ: context.drawImage(img,sx,sy,swidth,height,x,y,width,height)

ค่าพารามิเตอร์ข้างต้นอธิบายไว้ในตารางต่อไปนี้:

วิธีการนี้ใช้เพื่อรับข้อมูลภาพจากผืนผ้าใบ Canvas การใช้งานเฉพาะมีดังนี้:

รับข้อมูลพิกเซลภายในช่วงสี่เหลี่ยมที่ระบุของผืนผ้าใบ: var ImageData = context.getImageData(x,y,width,height)

ค่าพารามิเตอร์ข้างต้นอธิบายไว้ในตารางต่อไปนี้:

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

วิธีนี้ง่ายมาก และใช้เพื่อเขียนข้อมูลรูปภาพใหม่ลงใน Canvas Canvas การใช้งานเฉพาะมีดังนี้:

 context.putImageData(imgData,x,y,dirtyX,dirtyY,dirtyWidth,dirtyHeight)

ค่าพารามิเตอร์ข้างต้นอธิบายไว้ในตารางต่อไปนี้:

วิธีการนี้จะแตกต่างจากสามวิธีข้างต้น มันเป็นวิธีการของวัตถุ Canvas วิธีการนี้จะส่งกลับสตริงที่มีข้อมูล URI ได้โดยตรง > แท็กโดยเฉพาะการใช้งานมีดังนี้:

 var dataURL = canvas.toDataURL (ประเภท, ตัวเข้ารหัสตัวเลือก);

ค่าพารามิเตอร์ข้างต้นอธิบายไว้ในตารางต่อไปนี้:

ตัวอย่างนี้จะแนะนำวิธีการประมวลผลภาพสีให้เป็นภาพขาวดำโดยใช้โค้ดโดยย่อ

 <!--HTML--><canvas id=ความกว้างของผ้าใบ=600 ความสูง=600></canvas><input id=ประเภทด้ามจับ=ค่าปุ่ม=รูปภาพกระบวนการ/><input id=สร้างประเภท=ค่าปุ่ม=สร้างรูปภาพ /><div id=ผลลัพธ์></div>

 //JavaScriptwindow.onload = function(){ var canvas = document.getElementById(canvas), //รับบริบทของวัตถุ Canvas = canvas.getContext('2d'); //รับวัตถุบริบท 2D, Canvas API ส่วนใหญ่ วิธีการวัตถุนี้ var image = new Image(); //กำหนดวัตถุรูปภาพ image.src = 'imgs/img.jpg'; image.onload = function(){ //คุณต้องใส่ใจที่นี่! การดำเนินการที่ตามมาทั้งหมดจะต้องดำเนินการหลังจากโหลดรูปภาพสำเร็จ มิฉะนั้นรูปภาพจะถูกประมวลผลที่ไม่ถูกต้อง context.drawImage(image,0,0); //เริ่มวาดภาพจากมุมซ้ายบน (0,0) ของ Canvas canvas ขนาดเริ่มต้นคือขนาดจริงของรูปภาพ var handle = document.getElementById(handle); var create = document.getElementById(create); handle.onclick = function(){/ // คลิกปุ่มประมวลผลรูปภาพเพื่อประมวลผลรูปภาพ var imgData = context.getImageData(0,0,canvas.width,canvas.height); //รับข้อมูลรูปภาพ var data = imgData.data; //รับข้อมูลอาร์เรย์แต่ละพิกเซลในอาร์เรย์ แสดงถึงค่าสีแดง เขียว น้ำเงิน และความโปร่งใสตามลำดับ var ค่าเฉลี่ย = 0; สำหรับ (var i = 0; i < data.length; i+=4) { เฉลี่ย = Math.floor((data[i]+data[i+1]+data[i+2])/3); //เฉลี่ยค่าสีแดง เขียว และน้ำเงินเพื่อรับข้อมูลค่าระดับสีเทา[i] = data[i+1] = data[i+2] = ค่าเฉลี่ย; เขียนค่าสีของแต่ละพิกเซลใหม่} imgData.data = data; context.putImageData(imgData,0,0); //เขียนข้อมูลรูปภาพที่ประมวลผลใหม่ไปยังแคนวาสแคนวาส และรูปภาพในแคนวาสจะกลายเป็นสีขาวดำ}; create.onclick = function(){ // คลิกปุ่มสร้างรูปภาพเพื่อส่งออกรูปภาพ var imgSrc = canvas.toDataURL( ); // รับ DataURL ของรูปภาพ var newImg = new Image(); var result = document.getElementById(result); newImg.src = imgSrc; result.innerHTML = ''; result.appendChild(newImg); };

บางทีโค้ดข้างต้นอาจเขียนได้ไม่ดีนักและดูเหมือนจะเข้าใจได้ไม่ง่ายนัก ทางที่ดีควรเขียนด้วยตัวเองเพื่อที่คุณจะได้เข้าใจได้ลึกซึ้งยิ่งขึ้น

ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network