In addition to using canvas to implement filters, you can also use off-screen technology to function like a magnifying glass.
For the convenience of explanation, this article is divided into 2 application parts:
Canvas learning and filter implementation have been introduced to the drawImage interface. In addition to drawing images, this interface can also draw one canvas object onto another canvas object . This is off-screen technology.
In the code, there are two canvas tags. They are visible and invisible respectively. The Context object on the invisible canvas object is where we place the image watermark.
For more details, please see the code comments:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>Learn Canvas</title> <style> canvas { display: block; margin: 0 auto; border: 1px solid # 222; } input { display: block; margin: 20px auto; width: 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) /* for the second one Add watermark to the Context object obtained by canvas */ watermarkCanvas.width = 300 watermarkCanvas.height = 100 watermarkCtx.font = bold 20px Arial watermarkCtx.lineWidth = 1 watermarkCtx.fillStyle = rgba(255, 255, 255, 0.5) watermarkCtx.fillText(=== yuanxin.me ===, 50, 50) /**** **********************************/ var img = new Image() img.src = ./img/photo.jpg /* Perform operations after loading the image*/ img.onload = function () { canvas.width = img.width; canvas.height = img.height; drawImageByScale(canvas, ctx, img, scale , watermarkCanvas); // Listen to the mousemove event of the input tag // Note: mousemove monitors value changes in real time and consumes large memory. slider.onmousemove = function () { scale = slider.value drawImageByScale(canvas, ctx, img, scale, watermarkCanvas); } } /******** **********/ } /** * * @param {Object} canvas canvas object* @param {Object} ctx * @param {Object} img * @param {Number} scale Scaling ratio* @param {Object} watermark watermark object*/ function drawImageByScale(canvas, ctx, img, scale, watermark) { //The image is scaled according to the ratio var width = img.width * scale, height = img.height * scale // (dx, dy): The starting coordinates of drawing img on the canvas var dx = canvas.width / 2 - width / 2, dy = canvas.height / 2 - height / 2 ctx.clearRect(0, 0, canvas.width, canvas.height) // No1 clear the canvas ctx.drawImage(img, dx, dy, width, height) // No2 redraw the image if (watermark) { // No3 Determine whether there is a watermark: Yes, draw the watermark ctx.drawImage(watermark, canvas.width - watermark.width, canvas.height - watermark.height) } } </script></body></html>The effect is shown in the figure below:
Drag the slider to zoom in and out of the image. Then right click to save the image. The saved image will already have a watermark, as shown below:
3. Implement a magnifying glassOn the basis of the above-mentioned center zoom, the master of the magnifying glass needs to pay attention to the following two parts:
The code is as follows:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>Document</title> <style> canvas { display: block; margin: 0 auto; border: 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) // Off-screen canvas var ctx = canvas.getContext(2d) var offCtx = offCanvas.getContext(2d) //Context object of off-screen canvas var img = new Image() window.onload = function () { img.src = ./img/photo.jpg img.onload = function () { canvas.width = img.width canvas.height = img.height offCanvas.width = img.width offCanvas.height = img .height // Calculate the scaling ratio scale = offCanvas.width / canvas.width // In the first acquaintance state, both canvases draw Image ctx.drawImage(img, 0, 0, canvas.width, canvas.height) offCtx.drawImage(img, 0, 0, canvas.width, canvas.height) } // Mouse pressed canvas.onmousedown = function (event) { event.preventDefault() // Disable the default event var point = windowToCanvas(event.clientX, event.clientY) // Get the coordinates of the mouse relative to the canvas label isMouseDown = true drawCanvasWithMagnifier(true, point) // Draw the enlarged image on the off-screen canvas} // Move the mouse canvas.onmousemove = function (event) { event.preventDefault() / / Disable the default event if (isMouseDown === true) { var point = windowToCanvas(event.clientX, event.clientY) drawCanvasWithMagnifier(true, point) } } // Release the mouse canvas.onmouseup = function (event) { event.preventDefault() // Disable the default event isMouseDown = false drawCanvasWithMagnifier(false) // Do not draw the off-screen magnifier} // Move the mouse out of the canvas label canvas .onmouseout = function (event) { event.preventDefault() // Disable the default event isMouseDown = false drawCanvasWithMagnifier(false) // Do not draw an off-screen magnifying glass} } /** * Returns the coordinates of the mouse relative to the upper left corner of the canvas * @param {Number} x The screen coordinates of the mouse x * @param {Number} y The screen coordinates of the mouse y */ function windowToCanvas(x , y) { var bbox = canvas.getBoundingClientRect() // bbox stores the coordinates of canvas relative to the screen return { x: x - bbox.x, y: y - bbox.y } } function drawCanvasWithMagnifier(isShow, point) { ctx.clearRect(0, 0, canvas.width, canvas.height) // Clear the canvas ctx.drawImage(img, 0, 0, canvas.width, canvas. height) // Draw an image on the canvas/* Use off-screen to draw a magnifying glass*/ if (isShow) { var { x, y } = point var mr = 50 // Side length of square magnifying glass // (sx, sy): Starting coordinates of the image to be magnified var sx = x - mr / 2, sy = y - mr / 2 // (dx, dy): Magnified The starting coordinates of the image var dx = x - mr, dy = y - mr // Create a square area starting from (sx, sy) on offCanvas whose length and width are mr // Zoom in to // A square visible area starting from (dx, dy) on the canvas with a length and width of 2 * mr // This achieves the magnification effect ctx.drawImage(offCanvas, sx, sy, mr, mr, dx, dy , 2 * mr, 2 * mr) } /************************/ } </script></body></html>The effect of the magnifying glass is as shown in the picture below (the area marked with the red pen is our square magnifying glass):
The above is the entire content of this article. I hope it will be helpful to everyone’s study. I also hope everyone will support VeVb Wulin Network.