Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to use canvas to achieve off-screen technology and magnifying glass effect in html". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let the editor take you to learn "how to use canvas to achieve off-screen technology and magnifying glass effect in html"!

Using canvas, we can not only realize the filter, but also use the magnifying glass function of off-screen technology.

In order to facilitate explanation, this paper is divided into two application parts:

Implement watermarking and center scaling

Realize magnifying glass

1. What is off-screen technology?

Canvas Learning and filter implementation have introduced 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.

two。 Implement watermarking and center scaling

In the code, there are two canvas tags. They are visible and invisible. The Context object on the invisible canvas object is where we put the image watermark.

For more details, see the code comments:

Learn Canvas canvas {display: block; margin: 0 auto; border: 1px solid # 222;} input {display: block; margin: 20px auto Width: 800px} _ 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") / * Add a watermark to the Context object obtained by the second canvas * / watermarkCanvas.width = 300 watermarkCanvas.height = 100 watermarkCtx.font = "bold 20px Arial" watermarkCtx.lineWidth = "1" watermarkCtx.fillStyle = "rgba 255,255,0.5) "watermarkCtx.fillText (" = yuanxin.me = = ", 50 50) / * * / var img = new Image () img.src = ". / img/photo.jpg" / * perform the operation after loading the picture * / img.onload = function () {canvas.width = img.width Canvas.height = img.height; drawImageByScale (canvas, ctx, img, scale, watermarkCanvas); / / listen for mousemove events of input tags / / Note: for changes in mousemove real-time listening values, memory consumption is high 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 scale * @ param {Object} watermark watermark object * / function drawImageByScale (canvas, ctx, img, scale Watermark) {/ / the image is scaled proportionally var width = img.width * scale, height = img.height * scale / / (dx, dy): the starting coordinates of the img drawn 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 empty canvas ctx.drawImage (img, dx, dy, width, height) / / No2 redraw image if (watermark) {/ / No3 to determine whether there is a watermark: yes, draw a watermark ctx.drawImage (watermark, canvas.width-watermark.width, canvas.height-watermark.height)}}

The implementation effect is shown in the following figure:

Drag the slider to zoom in and out of the image. Then right-click to save the image. After the saved image, there is already a watermark, as shown in the following figure:

3. Realize magnifying glass

On the basis of the above central zoom, the main realization of the magnifying mirror needs to pay attention to the following two parts:

Detailed handling of mouse response events for canvas: slide in, slide out, click, and release

Recalculate the off-screen coordinates (see code notes for detailed formula calculation ideas)

Recalculate the coordinates of the mouse relative to the canvas tag (see code notes for detailed formula calculation ideas)

The code is as follows:

Document canvas {display: block; margin: 0 auto; border: 1px solid # 222 } var isMouseDown = false Scale = 1.0var 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 var img = new Image () _ window.onload = function () {img.src = ". / img/photo.jpg" for off-screen canvas Img.onload = function () {canvas.width = img.width canvas.height = img.height offCanvas.width = img.width offCanvas.height = img.height / / calculate the scale scale = offCanvas.width / canvas.width / / at first acquaintance Both canvas draw Image ctx.drawImage (img, 0,0, canvas.width, canvas.height) offCtx.drawImage (img, 0,0, canvas.width, canvas.height)} / / Mouse down 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 tag isMouseDown = true drawCanvasWithMagnifier (true, point) / / draw the enlarged image on the off-screen canvas} / / Mouse movement canvas.onmousemove = function (event) {event.preventDefault () / / disable the default event if (isMouseDown = true) {var point = windowToCanvas (event.clientX) Event.clientY) drawCanvasWithMagnifier (true Point)}} / / Mouse release canvas.onmouseup = function (event) {event.preventDefault () / disable default event isMouseDown = false drawCanvasWithMagnifier (false) / / No off-screen magnifying glass} / / Mouse remove canvas label canvas.onmouseout = function (event) {event.preventDefault () / / disable the default event isMouseDown = false drawCanvasWithMagnifier (false) / / do not draw an off-screen magnifying glass}} / * return the coordinates of the mouse relative to the upper left corner of 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 canvas ctx.drawImage (img, 0,0, canvas.width) Canvas.height) / / draw an image on the canvas / * use off-screen Draw magnifying glass * / if (isShow) {var {x, y} = point var mr = 50 / / square magnifying glass side length / / (sx, sy): the starting coordinates of the image to be magnified var sx = x-mr / 2, sy = y-mr / 2 / / (dx, dy): the starting coordinates of the enlarged image var dx = x-mr Dy = y-mr / / magnify the square region where the length and width of (sx,sy) start on offCanvas is mr / / enlarge to / / canvas (dx,dy) the square visual area whose length and width is 2 * mr / / thus realize the magnification effect ctx.drawImage (offCanvas, sx,sy, mr, mr, dx,dy, 2 * mr) 2 * mr)} / * /} so far I believe you have a deeper understanding of "how to use canvas to achieve off-screen technology and magnifying glass effect in html". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.