เอฟเฟกต์ฟิลเตอร์ซีรีย์ Canvas

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