Además de utilizar canvas para implementar filtros, también puedes utilizar tecnología fuera de la pantalla para que funcione como una lupa.
Para facilitar la explicación, este artículo se divide en 2 partes de aplicación:
Se han introducido el aprendizaje de Canvas y la implementación de filtros en la interfaz drawImage . Además de dibujar imágenes, esta interfaz también puede dibujar un objeto canvas sobre otro objeto canvas . Esta es tecnología fuera de la pantalla.
En el código, hay dos etiquetas de lienzo. Son visibles e invisibles respectivamente. El objeto Contexto en el objeto de lienzo invisible es donde colocamos la marca de agua de la imagen.
Para obtener más detalles, consulte los comentarios del código:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>Aprender lienzo</title> <estilo> lienzo { display: block; 0 auto border: 1px solid #; 222; } entrada { pantalla: bloque; margen: 20px ancho: 800px } </style></head><body> <div id=app> <canvas id=mi-lienzo></canvas> <tipo de entrada=valor de rango=1.0 min=0.5 max=3.0 paso=0.1> <canvas id=marca de agua-estilo de lienzo=display: none;></canvas> </div> <tipo de script=texto/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) /* para el segundo Agregue marca de agua al objeto Contexto obtenido por lienzo */ watermarkCanvas.width = 300 watermarkCanvas.height = 100 watermarkCtx.font = negrita 20px Arial watermarkCtx.lineWidth = 1 watermarkCtx.fillStyle = rgba(255, 255, 255, 0.5) watermarkCtx.fillText(=== yuanxin.me ===, 50, 50) /**** ********************************/ var img = nueva imagen() img.src = ./img/photo.jpg /* Realizar operaciones después de cargar la imagen*/ img.onload = function () { canvas.width = img.width; canvas.height = img.height; escala, marca de aguaCanvas); // Escuche el evento de movimiento del mouse de la etiqueta de entrada // Nota: mousemove monitorea los cambios de valores en tiempo real y consume mucha memoria slider.onmousemove = function () { scale = slider.value drawImageByScale(canvas, ctx, img, scale, watermarkCanvas); * **********/ } /** * * @param {Objeto} lienzo Objeto lienzo * @param {Objeto} ctx * @param {Objeto} img * @param {Número} escala Relación de escala* @param {Objeto} marca de agua objeto de marca de agua*/ function drawImageByScale(canvas, ctx, img, scale, watermark) { //La imagen se escala de acuerdo con la relación var ancho = img.width * escala, altura = img. altura * escala // (dx, dy): Las coordenadas iniciales del dibujo img en el lienzo var dx = lienzo.ancho / 2 - ancho / 2, dy = lienzo.alto / 2 - altura / 2 ctx.clearRect(0, 0, canvas.width, canvas.height) // No1 limpia el lienzo ctx.drawImage(img, dx, dy, width, height) // No2 vuelve a dibujar la imagen if (marca de agua) { // No3 Determinar si hay una marca de agua: Sí, dibujar la marca de agua ctx.drawImage(watermark, canvas.width - watermark.width, canvas.height - marca de agua.altura) } } </script></body></html>El efecto se muestra en la siguiente figura:
Arrastre el control deslizante para acercar y alejar la imagen. Luego haga clic derecho para guardar la imagen. La imagen guardada ya tendrá una marca de agua, como se muestra a continuación:
3. Implementar una lupaSobre la base del zoom central mencionado anteriormente, el maestro de la lupa debe prestar atención a las dos partes siguientes:
El código es el siguiente:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>Documento</title> <style> lienzo { display: block; 0 auto; borde: 1px sólido #222 ; } </style></head><body> <canvas id=my-canvas></canvas> <canvas id=fuera del lienzo style=display: none;></canvas> <script> var isMouseDown = false, escala = 1.0 var canvas = document.querySelector(#my-canvas) var offCanvas = document.querySelector(#off-canvas) // Lienzo fuera de pantalla var ctx = canvas.getContext(2d) var offCtx = offCanvas.getContext(2d) //Objeto de contexto del lienzo fuera de la pantalla var img = new Image() window.onload = función () { img.src = ./img/photo.jpg img.onload = función () { canvas.width = img.width canvas.height = img.height offCanvas.width = img.width offCanvas.height = img .height // Calcula la relación de escala escala = offCanvas.width / canvas.width // En el primer estado de conocimiento, ambos lienzos dibujan Imagen ctx.drawImage(img, 0, 0, canvas.width, canvas.height) offCtx.drawImage(img, 0, 0, canvas.width, canvas.height) } // Mouse presionado canvas.onmousedown = función (evento) { event.preventDefault() // Deshabilitar el evento predeterminado var point = windowToCanvas(event.clientX, event.clientY) // Obtenga las coordenadas del mouse relativas a la etiqueta del lienzo isMouseDown = true drawCanvasWithMagnifier(true, point) // Dibuja la imagen ampliada en el lienzo fuera de la pantalla} // Mueve el mouse canvas.onmousemove = function (event) { event.preventDefault () // Deshabilita el evento predeterminado if (isMouseDown === true) { var point = windowToCanvas(event.clientX, event.clientY) drawCanvasWithMagnifier(true, point) } } // Suelta el mouse canvas.onmouseup = function (event) { event.preventDefault() // Deshabilita el evento predeterminado isMouseDown = false drawCanvasWithMagnifier(false) // No dibuja la lupa fuera de la pantalla} // Mover el mouse fuera de la etiqueta del lienzo canvas .onmouseout = function (event) { event.preventDefault() // Deshabilitar el evento predeterminado isMouseDown = false drawCanvasWithMagnifier(false) // No dibujes una lupa fuera de la pantalla} } /** * Devuelve las coordenadas del mouse en relación con la esquina superior izquierda del lienzo * @param {Number} x Las coordenadas de la pantalla del mouse x * @param {Number} y Las coordenadas de pantalla del mouse y */ function windowToCanvas(x, y) { var bbox = canvas.getBoundingClientRect() // bbox almacena las coordenadas del lienzo relativas a la pantalla return { x: x - bbox.x, y: y - bbox.y } } function drawCanvasWithMagnifier(isShow, point) { ctx.clearRect(0, 0, canvas.width, canvas.height) // Limpiar el lienzo ctx.drawImage(img, 0, 0, canvas.width, canvas . height) // Dibujar una imagen en el lienzo/* Usar fuera de la pantalla para dibujar una lupa*/ if (isShow) { var { x, y } = point var mr = 50 // Longitud lateral de la lupa cuadrada // (sx, sy): Coordenadas iniciales de la imagen a ampliar var sx = x - mr / 2, sy = y - mr / 2 // (dx, dy ): Ampliado Las coordenadas iniciales de la imagen var dx = x - mr, dy = y - mr // Crea un área cuadrada a partir de (sx, sy) on offCanvas cuyo largo y ancho son mr // Acercar a // Un área cuadrada visible que comienza desde (dx, dy) en el lienzo con una longitud y un ancho de 2 * mr // Esto logra el efecto de ampliación ctx.drawImage(offCanvas, sx, sy, mr, mr, dx , dy , 2 * señor, 2 * señor) } /************************/ } </script></body></html >El efecto de la lupa es como se muestra en la siguiente imagen (el área marcada con el bolígrafo rojo es nuestra lupa cuadrada):
Lo anterior es el contenido completo de este artículo. Espero que sea útil para el estudio de todos. También espero que todos apoyen VeVb Wulin Network.