นอกจากการใช้ canvas เพื่อใช้ฟิลเตอร์แล้ว คุณยังสามารถใช้ เทคโนโลยีนอกจอ เพื่อทำงานเหมือนแว่นขยายได้อีกด้วย
เพื่อความสะดวกในการอธิบาย บทความนี้จะแบ่งออกเป็น 2 ส่วนคือ
การเรียนรู้ Canvas และการใช้ตัวกรองได้รับการแนะนำในอินเทอร์เฟซ drawImage นอกเหนือจากการวาดภาพแล้ว อินเทอร์เฟซนี้ยังสามารถ วาดวัตถุ canvas หนึ่งไปยังวัตถุ canvas อื่นได้ นี่คือเทคโนโลยีนอกจอ
ในโค้ดจะมีแท็กแคนวาสสองแท็ก มองเห็นและมองไม่เห็นตามลำดับ วัตถุบริบทบนวัตถุผืนผ้าใบที่มองไม่เห็นคือตำแหน่งที่เราวางลายน้ำของรูปภาพ
สำหรับรายละเอียดเพิ่มเติม โปรดดูความคิดเห็นของโค้ด:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>เรียนรู้ Canvas</title> <style> canvas { จอแสดงผล: บล็อก; ระยะขอบ: 0 อัตโนมัติ; 222; } อินพุต { จอแสดงผล: บล็อก; ระยะขอบ: 20px อัตโนมัติ; ความกว้าง: 800px } </style></head><body> <div id=app> <canvas id=my-canvas></canvas> <input type=range value=1.0 min=0.5 max=3.0 step=0.1> <canvas id=watermark-canvas style=display: none;></canvas> </div> <script type=text/javascript> window.onload = function () { var canvas = document.querySelector(#my-canvas) var watermarkCanvas = document.querySelector(#watermark-canvas) var slider = document.querySelector(input) var scale = slider.value var ctx = canvas.getContext('2d') var watermarkCtx = watermarkCanvas.getContext(2d) /* สำหรับอันที่สอง เพิ่มลายน้ำให้กับวัตถุบริบทที่ได้รับจาก canvas */ watermarkCanvas.width = 300 watermarkCanvas.height = 100 watermarkCtx.font = ตัวหนา 20px Arial watermarkCtx.lineWidth = 1 watermarkCtx.fillStyle = rgba(255, 255, 255, 0.5) watermarkCtx.fillText(=== yuanxin.me ===, 50, 50) /**** **********************************/ var img = รูปภาพใหม่ () img.src = ./img/photo.jpg /* ดำเนินการหลังจากโหลดรูปภาพ*/ img.onload = function () { canvas.width = img.width; canvas.height = img.height; ขนาด , watermarkCanvas); // ฟังเหตุการณ์ mousemove ของแท็กอินพุต // หมายเหตุ: mousemove ตรวจสอบการเปลี่ยนแปลงค่าแบบเรียลไทม์และใช้หน่วยความจำขนาดใหญ่ slider.onmousemove = function () { scale = slider.value DrawImageByScale(canvas, ctx, img, scale, watermarkCanvas); * **********/ } /** * * @param {Object} แคนวาส วัตถุ Canvas * @param {Object} ctx * @param {Object} img * @param {Number} สเกล อัตราส่วนสเกล* @param {Object} วัตถุลายน้ำลายน้ำ*/ ฟังก์ชั่น DrawImageByScale(canvas, ctx, img, สเกล, ลายน้ำ) { //รูปภาพถูกปรับขนาดตามอัตราส่วน var width = img.width * scale, height = img ความสูง * สเกล // (dx, dy): พิกัดเริ่มต้นของการวาด img บนผืนผ้าใบ var dx = canvas.width / 2 - ความกว้าง / 2, dy = canvas.height / 2 - height / 2 ctx.clearRect(0, 0, canvas.width, canvas.height) // No1 ล้างผ้าใบ ctx.drawImage(img, dx, dy, width, height) // No2 วาดภาพใหม่ถ้า (ลายน้ำ) { // No3 ตรวจสอบว่ามีลายน้ำหรือไม่: ใช่ วาดลายน้ำ ctx.drawImage(watermark, canvas.width - watermark.width, canvas.height - ลายน้ำ.ความสูง) } } </script></body></html>เอฟเฟกต์ดังแสดงในรูปด้านล่าง:
ลากแถบเลื่อนเพื่อซูมเข้าและออกจากรูปภาพ จากนั้นคลิกขวาเพื่อบันทึกภาพ ภาพที่บันทึกจะมีลายน้ำอยู่แล้ว ดังภาพด้านล่าง:
3. ใช้แว่นขยายบนพื้นฐานของการซูมตรงกลางที่กล่าวมาข้างต้น ต้นแบบของแว่นขยายจำเป็นต้องให้ความสนใจกับสองส่วนต่อไปนี้:
รหัสมีดังนี้:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>เอกสาร</title> <style> canvas { จอแสดงผล: บล็อก; ระยะขอบ: 0 อัตโนมัติ; เส้นขอบ: 1px solid #222 ; } </style></head><body> <canvas id=my-canvas></canvas> <canvas id=off-canvas style=display: none;></canvas> <script> var isMouseDown = false, scale = 1.0 var canvas = document.querySelector(#my-canvas) var offCanvas = document.querySelector(#off-canvas) // ผ้าใบนอกหน้าจอ var ctx = canvas.getContext(2d) var offCtx = offCanvas.getContext(2d) // วัตถุบริบทของผืนผ้าใบนอกหน้าจอ var img = รูปภาพใหม่ () window.onload = ฟังก์ชั่น () { img.src = ./img/photo.jpg img.onload = ฟังก์ชั่น () { canvas.width = img.width canvas.height = img.height offCanvas.width = img.width offCanvas.height = img .height // คำนวณอัตราส่วนสเกล = offCanvas.width / canvas.width // ในสถานะคนรู้จักครั้งแรก ทั้งสองผืนผ้าใบวาดภาพ ctx.drawImage (img, 0, 0, canvas.width, canvas.height) offCtx.drawImage (img, 0, 0, canvas.width, canvas.height) } // กดเมาส์ canvas.onmousedown = function (เหตุการณ์) { event.preventDefault() // ปิดการใช้งานเหตุการณ์เริ่มต้น var point = windowToCanvas(event.clientX, event.clientY) // รับพิกัดของเมาส์ที่สัมพันธ์กับป้ายกำกับแคนวาส isMouseDown = true DrawCanvasWithMagnifier(true, point) // วาดภาพขยายบนผืนผ้าใบนอกหน้าจอ} // เลื่อนเมาส์ canvas.onmousemove = function (event) { event.preventDefault () / / ปิดการใช้งานเหตุการณ์เริ่มต้นถ้า (isMouseDown === true) { var point = windowToCanvas(event.clientX, event.clientY) DrawCanvasWithMagnifier(true, point) } } // ปล่อยเมาส์ canvas.onmouseup = function (event) { event.preventDefault() // ปิดการใช้งานเหตุการณ์เริ่มต้น isMouseDown = false DrawCanvasWithMagnifier(false) // อย่าวาดแว่นขยายนอกหน้าจอ} // ย้าย เลื่อนเมาส์ออกจากผ้าใบป้ายกำกับ canvas .onmouseout = function (event) { event.preventDefault() // ปิดการใช้งานเหตุการณ์เริ่มต้น isMouseDown = false DrawCanvasWithMagnifier(false) // อย่าวาดแว่นขยายนอกหน้าจอ} } /** * ส่งกลับพิกัดของเมาส์ที่สัมพันธ์กับมุมซ้ายบนของผืนผ้าใบ * @param {Number} x พิกัดหน้าจอของเมาส์ x * @param {Number} y พิกัดหน้าจอของเมาส์ y */ function windowToCanvas(x , y) { var bbox = canvas.getBoundingClientRect() // bbox เก็บพิกัดของ canvas ที่สัมพันธ์กับหน้าจอที่ส่งคืน { x: x - bbox.x, y: ย - bbox.y } } ฟังก์ชั่น DrawCanvasWithMagnifier(isShow, point) { ctx.clearRect(0, 0, canvas.width, canvas.height) // ล้างผ้าใบ ctx.drawImage(img, 0, 0, canvas.width, canvas .height) // วาดภาพบนผืนผ้าใบ/* ใช้นอกหน้าจอเพื่อวาดแว่นขยาย*/ if (isShow) { var { x, y } = point var mr = 50 // ความยาวด้านของแว่นขยายสี่เหลี่ยม // (sx, sy): พิกัดเริ่มต้นของรูปภาพที่จะขยาย var sx = x - mr / 2, sy = y - mr / 2 // (dx, dy ): ขยาย พิกัดเริ่มต้นของรูปภาพ var dx = x - mr, dy = y - mr // สร้างพื้นที่สี่เหลี่ยมจัตุรัสโดยเริ่มจาก (sx, sy) บน offCanvas ซึ่งมีความยาวและความกว้างเป็น mr // ซูมเข้าที่ // พื้นที่สี่เหลี่ยมจัตุรัสที่มองเห็นได้เริ่มต้นจาก (dx, dy) บนผืนผ้าใบที่มีความยาวและความกว้าง 2 * mr // ทำให้ได้เอฟเฟกต์การขยาย ctx.drawImage(offCanvas, sx, sy, mr, mr, dx , dy , 2 * นาย, 2 * นาย) } /************************/ } </script></body></html >ผลกระทบของแว่นขยายดังที่แสดงในภาพด้านล่าง (บริเวณที่ทำเครื่องหมายด้วยปากกาสีแดงคือแว่นขยายสี่เหลี่ยมของเรา):
ข้างต้นคือเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการศึกษาของทุกคน ฉันหวังว่าทุกคนจะสนับสนุน VeVb Wulin Network