Canvas เป็นสิ่งมหัศจรรย์จริงๆ มันไม่เพียงแต่สามารถวาดกราฟิก ข้อความ และบิตแมปต่างๆ เท่านั้น แต่ยังดำเนินการพิกเซลที่ซับซ้อนและประมวลผลบนบิตแมปได้อีกด้วย ดังนั้น สิ่งต่างๆ เช่น ตัวกรอง จึงสามารถนำไปใช้ได้จริงโดยใช้ Canvas ต่อไปก็ถึงเวลาพบกับปาฏิหาริย์
ก่อนอื่นเราจำเป็นต้องมีคอนเทนเนอร์ Canvas เช่น:
<canvas id=myCanvas width=800 height=800></canvas>
ต่อไปเราต้องใช้ Canvas เพื่อวาดภาพ:
var myCanvas = document.getElementById(myCanvas);var ctx = myCanvas.getContext(2d);var img = new Image();img.src = ./images/1526010092000.jpg;// เตรียมลิงก์รูปภาพของคุณเอง img.onload = (e) => {ctx.drawImage(img, 0, 0, 800, 800);//800 อันแรกแทนความกว้างของภาพที่วาด และ 800 อันที่สองแทนความสูงของภาพที่วาด}เอฟเฟ็กต์ของการวาดภาพ Canvas ครั้งแรก
ขั้นตอนต่อไปคือดำเนินการบางอย่างกับพิกเซลของภาพ หากต้องการดำเนินการดังกล่าว คุณต้องรับข้อมูลพิกเซลของรูปภาพจาก Canvas ก่อน และการรับข้อมูลนี้สามารถทำได้ผ่าน getImageData()
// ... ละเว้นโค้ดก่อนหน้า img.onload = (e) => {// ... ละเว้นโค้ดก่อนหน้า img = ctx.getImageData(0, 0, 800, 800); // รับสีของแต่ละอัน ข้อมูลพิกเซลไบต์}เนื่องจากขนาดของรูปภาพคือ 800 * 800 จึงต้องเคลื่อนที่พิกเซลเพื่อให้ได้ค่าสีแดง เขียว และน้ำเงินของแต่ละพิกเซล ดังนั้น:
// ... ละเว้นโค้ดก่อนหน้า img.onload = (e) => {// ... ละเว้นโค้ดก่อนหน้า var pixelLen = 800 * 800; // รับจำนวนพิกเซลสำหรับ(var i = 0; i < pixelLen * 4; i += 4) { var redC = img.data[i], // หน่วยไบต์แรกแสดงถึงสีแดง greenC = img.data[i + 1], // หน่วยไบต์ที่สองแสดงถึงสีเขียว blueC = img.data[i + 2], // หน่วยไบต์ที่สามแสดงถึงสีน้ำเงิน alpha = img.data[i + 3]; // หน่วยไบต์ที่สี่แสดงถึงความโปร่งใส}}จากการวนซ้ำข้างต้น เราได้รับค่าสีเฉพาะของแต่ละพิกเซลที่มีอยู่ในข้อมูลภาพ สิ่งหนึ่งที่ควรทราบก็คือข้อมูลของแต่ละพิกเซลไม่ใช่หนึ่งบิต แต่เป็นสี่บิตที่อยู่ติดกัน ซึ่งตามลำดับแสดงถึงสีแดง สีเขียว สีน้ำเงิน และความโปร่งใสของจุด ดังนั้น ในความเป็นจริง ความยาวอาร์เรย์ของข้อมูลไบต์แมปจะเท่ากับจำนวนพิกเซลคูณด้วย 4 ใน for loop เรายังจัดการกับคุณลักษณะนี้ตามนั้น
ด้วยการเฉลี่ยค่าสีแดง เขียว และน้ำเงินของแต่ละจุด จากนั้นกำหนดค่าเฉลี่ยที่สร้างขึ้นให้กับค่าสีแดง เขียว และน้ำเงินของพิกเซล จะทำให้เกิดเอฟเฟกต์ระดับสีเทาได้ ในที่สุด putImageData() ใช้วิธีอีกครั้ง เพียงแค่วาดภาพ โดยมีโค้ดดังนี้
// ... ละเว้นรหัสก่อนหน้า img.onload = (e) => { // ... ละเว้นรหัสก่อนหน้าสำหรับ(var i = 0; i < pixelLen * 4; i += 4) { // . .. ละเว้นโค้ดก่อนหน้า var grey = parseInt((redC + greenC + blueC) / 3); // รับค่าสีเทาหลังจากหาค่าเฉลี่ย img.data[i] = grey; // เปลี่ยนค่าสีแดง img.data[i + 1] = สีเทา; // เปลี่ยนค่าสีเขียว img.data[i + 2] = สีเทา; // เปลี่ยนค่าสีน้ำเงิน} ctx.putImageData(img, 0, 0, 800, 800);ในเวลานี้ จะเกิดเอฟเฟกต์ระดับสีเทา ดังที่แสดงด้านล่าง
Canvas วาดภาพเป็นครั้งที่สอง - เอฟเฟกต์ระดับสีเทา
ในการควบคุมความโปร่งใส คุณจะต้องแก้ไขค่าที่สอดคล้องกับหน่วยไบต์ที่สี่เท่านั้น ช่วงของค่าคือ 0~256 โดย 0 แสดงถึงความโปร่งใสโดยสมบูรณ์ และ 256 แสดงถึงความทึบโดยสมบูรณ์ ตัวอย่างเช่น:
// ... ละเว้นรหัสก่อนหน้า img.onload = (e) => { // ... ละเว้นรหัสก่อนหน้าสำหรับ(var i = 0; i < pixelLen * 4; i += 4) { // . .. ละเว้นโค้ดก่อนหน้า img.data[i + 3] = 128; // ความโปร่งใส 50% } // ... ละเว้นโค้ดก่อนหน้า }เอฟเฟกต์การวาดภาพผืนผ้าใบที่สาม - เพิ่มความโปร่งใส
จากนี้ด้วยการควบคุมค่า 4 ข้อมูลสำหรับแต่ละพิกเซลในภาพ จะทำให้ได้เอฟเฟกต์ของฟิลเตอร์ ไม่ใช่เรื่องง่ายเลย!
อ้างอิง:
"ความรู้พื้นฐาน HTML5 เทคโนโลยีหลัก และเคสที่ล้ำสมัย" เรียบเรียงโดย Liu Huan
ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network