การเรียนรู้ Canvas และโค้ดการใช้งานตัวกรอง

ในยุคที่ผลิตภัณฑ์ดิจิทัลแพร่หลายมากขึ้น การถ่ายภาพกลายเป็นส่วนสำคัญของชีวิตที่ขาดไม่ได้ ไม่ว่าคุณจะอยู่ที่บ้าน ออกนอกบ้าน หรือเดินทางไกล คุณก็จะได้ภาพถ่ายที่สวยงามเสมอ แต่ภาพที่ถ่ายด้วยกล้องโดยตรงมักจะมีช่องว่างระหว่างพวกเขากับความคาดหวังทางจิตวิทยาของเรา แล้วจะลดช่องว่างนี้ได้อย่างไร คำตอบคือ P-pictures บิวตี้ กล้องบิวตี้ทุกประเภทจึงผุดขึ้นมา และ P-pictures ก็กลายมาเป็นทักษะที่พกพาสะดวก

ในความเป็นจริง สิ่งที่เรียกว่าความงามนั้นไม่มีอะไรมากไปกว่าการใช้ฟิลเตอร์หลายตัวรวมกัน และฟิลเตอร์ก็ใช้อัลกอริธึมบางอย่างเพื่อจัดการพิกเซลของภาพเพื่อให้ได้เอฟเฟกต์พิเศษของภาพ เพื่อนที่เคยใช้ Photoshop รู้ว่ามีฟิลเตอร์มากมายใน PS ด้านล่างนี้เราจะใช้เทคโนโลยี js canvas เพื่อให้ได้เอฟเฟกต์ฟิลเตอร์ต่างๆ

เมื่อเร็ว ๆ นี้ฉันได้เรียนรู้จุดเด่นของ HTML5 - canvas การใช้แคนวาส ทำให้บุคลากรส่วนหน้าสามารถประมวลผลภาพได้อย่างง่ายดาย มี API มากมาย คราวนี้ฉันจะเรียนรู้ API ที่ใช้กันทั่วไปเป็นหลักและกรอกโค้ดสองรายการต่อไปนี้:

• ใช้ตัวกรองการลดสี
• ใช้ตัวกรองสีเชิงลบ (สีย้อนกลับ)

องค์ประกอบ HTML นี้ออกแบบมาสำหรับกราฟิกแบบเวกเตอร์ฝั่งไคลเอ็นต์ ไม่มีพฤติกรรมของตัวเอง แต่เปิดเผย API รูปวาดให้กับไคลเอ็นต์ JavaScript เพื่อให้สคริปต์สามารถวาดสิ่งที่ต้องการลงบนผืนผ้าใบได้

ข้อแตกต่างที่สำคัญระหว่างแท็ก <canvas> และ SVG และ VML ก็คือ <canvas> มี API การวาดแบบ JavaScript ในขณะที่ SVG และ VML ใช้เอกสาร XML เพื่ออธิบายการวาด

Canvas drawing API ส่วนใหญ่ไม่ได้ถูกกำหนดไว้ในองค์ประกอบ <canvas> เอง แต่ถูกกำหนดบนออบเจ็กต์สภาพแวดล้อมการวาดที่ได้รับผ่านเมธอด getContext() ของ Canvas ความกว้างและความสูงเริ่มต้นขององค์ประกอบ <canvas> คือ 300px และ 150px ตามลำดับ

 // ประมวลผลองค์ประกอบ canvas var c = document.querySelector(#my-canvas);c.width = 150;c.height = 70; // รับวัตถุบริบทบนแท็ก canvas ที่ระบุ var ctx = c.getContext(2d ctx.fillStyle = #FF0000; // สี ctx.fillRect(0, 0, 150, 75); // รูปร่าง

 var c = document.querySelector(#my-canvas);var ctx = c.getContext(2d);ctx.moveTo(0, 0); //พิกัดเริ่มต้น ctx.lineTo(200, 100); //สิ้นสุดพิกัด ctx . stroke(); // วาดทันที

สำหรับอินเทอร์เฟซ ctx.arc() พารามิเตอร์ทั้งห้าคือ: (x,y,r,start,stop) ในจำนวนนั้น x และ y คือพิกัดของจุดศูนย์กลางของวงกลม และ r คือรัศมี

หน่วย start และ stop เป็น เรเดียน ไม่ใช่ความยาว ไม่ใช่องศา

 var c = document.querySelector(#my-canvas);var ctx = c.getContext(2d);ctx.beginPath();ctx.arc(95, 50, 40, 0, 2 * Math.PI);ctx. จังหวะ();

 var c = document.getElementById(myCanvas);var ctx = c.getContext(2d);ctx.font = 30px Arial;ctx.fillText(สวัสดีชาวโลก, 10, 50);

สำหรับ API การประมวลผลภาพนั้น ส่วนใหญ่มีสี่ประเภท:

วาดภาพ: drawImage(img,x,y,width,height) หรือ drawImage(img,sx,sy,swidth,sheight,x,y,width,height)

รับข้อมูลรูปภาพ: getImageData(x,y,width,height)

เขียนข้อมูลรูปภาพใหม่: putImageData(imgData,x,y[,dirtyX,dirtyY,dirtyWidth,dirtyHeight])

ส่งออกรูปภาพ: toDataURL([type, encoderOptions])

สำหรับคำอธิบาย API และพารามิเตอร์โดยละเอียดเพิ่มเติม โปรดดู: คำอธิบายพารามิเตอร์ API การประมวลผลภาพ Canvas

จาก API เหล่านี้ เราสามารถวาดภาพของเราในองค์ประกอบ canvas ได้ สมมติว่ารูปภาพของเราคือ ./img/photo.jpg

 <script> window.onload = function () { var img = new Image() // ประกาศวัตถุรูปภาพใหม่ img.src = ./img/photo.jpg // หลังจากโหลดรูปภาพแล้ว img.onload = function () { var canvas = document.querySelector(#my-canvas); var ctx = canvas.getContext(2d); // ตามขนาดรูปภาพ ให้ระบุขนาดแคนวาส canvas.width = img.width canvas.height = img.height // วาดภาพ ctx.drawImage(img, 0, 0, canvas.width, canvas.height) } }</script>

ดังแสดงในรูปด้านล่าง รูปภาพถูกวาดลงบนผืนผ้าใบ:

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

เอฟเฟกต์การลบสีจะเทียบเท่ากับภาพถ่ายขาวดำที่ถ่ายโดยกล้องรุ่นเก่า จากความไวของสายตามนุษย์ ผู้คนได้ให้สูตรต่อไปนี้:

gray = red * 0.3 + green * 0.59 + blue * 0.11

รหัสมีดังนี้:

 <script> window.onload = function () { var img = รูปภาพใหม่ () img.src = ./img/photo.jpg img.onload = function () { var canvas = document.querySelector(#my-canvas); var ctx = canvas.getContext(2d); canvas.width = img.width canvas.height = img.height ctx.drawImage (img, 0, 0, canvas.width, canvas.height) // เริ่มการประมวลผลตัวกรอง var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height); for (var i = 0; i < imgData.data) ความยาว / 4; ++i) { var red = imgData.data[i * 4], สีเขียว = imgData.data[i * 4 + 1], สีน้ำเงิน = imgData.data[i * 4 + 2]; var grey = 0.3 * red + 0.59 * green + 0.11 * blue; // คำนวณสีเทา // รีเฟรช RGB หมายเหตุ: // imgData.data[i * 4 + 3] เก็บไว้เป็นอัลฟ่าไม่จำเป็นต้องเปลี่ยน imgData.data[i * 4] = สีเทา; imgData.data[i * 4 + 1] = สีเทา; 4 + 2] = สีเทา; } ctx.putImageData(imgData, 0, 0); // เขียนข้อมูลรูปภาพใหม่} }</script>

เอฟเฟกต์ดังแสดงด้านล่าง:

4.2 เอฟเฟกต์สีเชิงลบ

เอฟเฟกต์สีที่เป็นลบคือการลบค่าปัจจุบันออกจากค่าสูงสุด ค่าตัวเลขสูงสุดทางทฤษฎีใน RGB ที่ได้รับจาก getImageData คือ: 255 ดังนั้นสูตรจึงเป็นดังนี้:

new_val = 255 - val

รหัสมีดังนี้:

 <script> window.onload = function () { var img = รูปภาพใหม่ () img.src = ./img/photo.jpg img.onload = function () { var canvas = document.querySelector(#my-canvas); var ctx = canvas.getContext(2d); canvas.width = img.width canvas.height = img.height ctx.drawImage (img, 0, 0, canvas.width, canvas.height) // เริ่มการประมวลผลตัวกรอง var imgData = ctx.getImageData(0, 0, canvas.width, canvas.height); for (var i = 0; i < imgData.data) ความยาว / 4; ++i) { var red = imgData.data[i * 4], สีเขียว = imgData.data[i * 4 + 1], สีน้ำเงิน = imgData.data[i * 4 + 2]; // รีเฟรช RGB หมายเหตุ: // imgData.data[i * 4 + 3] เก็บอัลฟ่า ไม่จำเป็นต้องเปลี่ยน imgData.data[i * 4] = 255 - imgData ข้อมูล[i * 4]; imgData.data[i * 4 + 1] = 255 - imgData.data[i * 4 + 1]; imgData.data[i * 4 + 2] = 255 - imgData.data[i * 4 + 2]; ctx.putImageData(imgData, 0, 0); // เขียนข้อมูลรูปภาพใหม่} }</script>

การเรนเดอร์มีดังนี้:

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