Além de usar canvas para implementar filtros, você também pode usar a tecnologia off-screen para funcionar como uma lupa.
Para maior comodidade de explicação, este artigo está dividido em 2 partes de aplicação:
O aprendizado do Canvas e a implementação de filtros foram introduzidos na interface drawImage . Além de desenhar imagens, esta interface também pode desenhar um objeto canvas em outro objeto canvas . Esta é uma tecnologia fora da tela.
No código, existem duas tags de tela. Eles são visíveis e invisíveis respectivamente. O objeto Context no objeto canvas invisível é onde colocamos a marca d'água da imagem.
Para mais detalhes, consulte os comentários do código:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>Aprender Canvas</title> <style> canvas { display: block; 0 auto border: 1px solid #; 222; } entrada { display: bloco; margem: 20px largura automática: 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) /* para o segundo Adicione marca d'água ao objeto Context obtido por canvas */ watermarkCanvas.width = 300 watermarkCanvas.height = 100 marca d'águaCtx.font = negrito 20px Arial marca d'águaCtx.lineWidth = 1 marca d'águaCtx.fillStyle = rgba (255, 255, 255, 0,5) marca d'águaCtx.fillText (=== yuanxin.me ===, 50, 50) /**** **********************************/ var img = new Image() img.src = ./img/photo.jpg /* Execute operações após carregar a imagem*/ img.onload = function () { canvas.width = img.width; canvas.height = img.height; scale , watermarkCanvas); // Escuta o evento mousemove da tag input // Nota: mousemove monitora alterações de valor em tempo real e consome muita memória slider.onmousemove = function () { scale = slider.value drawImageByScale(canvas, ctx, img, scale, watermarkCanvas); * **********/ } /** * * @param {Object} canvas Objeto de tela * @param {Object} ctx * @param {Object} img * @param {Number} escala Proporção de escala* @param {Object} watermark watermark object*/ function drawImageByScale(canvas, ctx, img, scale, watermark) { //A imagem é dimensionada de acordo com a proporção var width = img.width * scale, height = img. altura * escala // (dx, dy): As coordenadas iniciais do desenho img na tela var dx = canvas.width / 2 - largura / 2, dy = canvas.height / 2 - height / 2 ctx.clearRect(0, 0, canvas.width, canvas.height) // No1 limpa a tela ctx.drawImage(img, dx, dy, width, height) // No2 redesenha a imagem if (marca d'água) { // No3 Determine se existe uma marca d'água: Sim, desenhe a marca d'água ctx.drawImage(watermark, canvas.width - watermark.width, canvas.height - marca d'água.height) } } </script></body></html>O efeito é mostrado na figura abaixo:
Arraste o controle deslizante para aumentar e diminuir o zoom da imagem. Em seguida, clique com o botão direito para salvar a imagem. A imagem salva já terá marca d'água, conforme mostrado abaixo:
3. Implemente uma lupaCom base no zoom central mencionado acima, o mestre da lupa precisa prestar atenção às duas partes a seguir:
O código é o seguinte:
<!DOCTYPE html><html lang=en><head> <meta charset=UTF-8> <title>Documento</title> <style> canvas { display: block; 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) // Tela fora da tela var ctx = canvas.getContext(2d) var offCtx = offCanvas.getContext(2d) //Objeto de contexto da tela fora da tela 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 // Calcula a proporção de escala scale = offCanvas.width / canvas.width // No primeiro estado de conhecimento, ambas as telas desenham Imagem ctx.drawImage(img, 0, 0, canvas.width, canvas.height) offCtx.drawImage(img, 0, 0, canvas.width, canvas.height) } // Mouse pressionado canvas.onmousedown = function (event) { event.preventDefault() // Desativa o evento padrão var point = windowToCanvas(event.clientX, event.clientY) // Obtenha as coordenadas do mouse em relação ao rótulo da tela isMouseDown = true drawCanvasWithMagnifier(true, point) // Desenha a imagem ampliada na tela fora da tela} // Mova o mouse canvas.onmousemove = function (event) { event.preventDefault () // Desativa o evento padrão if (isMouseDown === true) { var point = windowToCanvas(event.clientX, event.clientY) drawCanvasWithMagnifier(true, point) } } // Solte o mouse canvas.onmouseup = function (event) { event.preventDefault() // Desative o evento padrão isMouseDown = false drawCanvasWithMagnifier(false) // Não desenhe a lupa fora da tela} // Move o mouse fora do rótulo da tela canvas .onmouseout = function (event) { event.preventDefault() // Desativa o evento padrão isMouseDown = false drawCanvasWithMagnifier(false) // Não desenhe uma lupa fora da tela} } /** * Retorna as coordenadas do mouse em relação ao canto superior esquerdo da tela * @param {Number} x As coordenadas da tela do mouse x * @param {Number} y As coordenadas da tela do mouse y */ function windowToCanvas(x , y) { var bbox = canvas.getBoundingClientRect() // bbox armazena as coordenadas da tela em relação à tela return { x: x - bbox.x, y: sim - bbox.y } } function drawCanvasWithMagnifier(isShow, point) { ctx.clearRect(0, 0, canvas.width, canvas.height) // Limpa a tela ctx.drawImage(img, 0, 0, canvas.width, canvas . height) // Desenha uma imagem na tela/* Use fora da tela para desenhar uma lupa*/ if (isShow) { var { x, y } = point var mr = 50 // Comprimento lateral da lupa quadrada // (sx, sy): Coordenadas iniciais da imagem a ser ampliada var sx = x - mr / 2, sy = y - mr / 2 // (dx, dy ): Ampliada As coordenadas iniciais da imagem var dx = x - mr, dy = y - mr // Cria uma área quadrada começando em (sx, sy) no offCanvas cujo comprimento e largura são mr // Amplie para // Uma área quadrada visível começando em (dx, dy) na tela com comprimento e largura de 2 * mr // Isso obtém o efeito de ampliação ctx.drawImage(offCanvas, sx, sy, mr, mr, dx , dy , 2 * senhor, 2 * senhor) } /************************/ } </script></body></html >O efeito da lupa é como mostrado na figura abaixo (a área marcada com a caneta vermelha é a nossa lupa quadrada):
O texto acima é todo o conteúdo deste artigo. Espero que seja útil para o estudo de todos. Também espero que todos apoiem a Rede VeVb Wulin.