Efeito de Lupa em Imagens | HTML Canvas

Introdução

Neste projeto, você aprenderá como criar um efeito de lupa em imagens usando o HTML Canvas. Este efeito é frequentemente visto em galerias de imagens ou sites de produtos, permitindo que os usuários passem o mouse sobre uma imagem e obtenham uma visualização ampliada de uma porção específica. O efeito de lupa fornece uma visualização detalhada sem ter que abrir uma nova janela ou página.

👀 Pré-visualização

demonstração do efeito de lupa

🎯 Tarefas

Neste projeto, você aprenderá:

Como inicializar e configurar um elemento HTML Canvas
Como carregar uma imagem no canvas
Como implementar ouvintes de eventos para movimentos do mouse
Como criar funções auxiliares para o seletor e a exibição ampliada

🏆 Conquistas

Após concluir este projeto, você será capaz de:

Usar a API Canvas para desenhar e manipular imagens
Rastrear coordenadas do mouse e responder a eventos de movimento do mouse
Criar um efeito de lupa copiando e exibindo uma porção de uma imagem

Design da Página Web

Projetaremos uma página web simples com duas canvases (canvas e copycanvas) e uma div quadrada que atuará como o seletor para a ampliação.

Em index.html, adicione o seguinte:

<!doctype html>
<html lang="en">
  <head>
    <title>Magnifying Effect Using Canvas</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <style>
      #copycanvas {
        border: 1px solid #000;
        display: none;
      }
      #square {
        width: 90px;
        height: 90px;
        background-color: #cc3;
        border: 1px solid #f00;
        opacity: 0.5;
        position: absolute;
        z-index: 999;
        display: none;
        cursor: crosshair;
      }
    </style>
  </head>
  <body>
    <canvas id="canvas" width="500" height="400"></canvas>
    <canvas id="copycanvas" width="300" height="300"></canvas>
    <div id="square"></div>
    <script src="main.js"></script>
  </body>
</html>

Configurar o Canvas e Carregar a Imagem

Agora, inicializaremos nossos canvases, criaremos um objeto de imagem e carregaremos nossa imagem no canvas.

Inicialize o canvas e seu contexto.

// main.js
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

// Initialize the copy canvas and its context
var copycanvas = document.getElementById("copycanvas");
var copycontext = copycanvas.getContext("2d");

// Initialize the square selector
var square = document.getElementById("square");
var squaredata = {};
// getBoundingClientRect method can get the top, bottom, left and right coordinates of the element relative to the browser
box = canvas.getBoundingClientRect();

Carregue a imagem e desenhe-a no canvas.

var image = new Image();
image.src = "corgi.png";
image.onload = function () {
  // Here the canvas method of drawing images is used
  context.drawImage(image, 0, 0, canvas.width, canvas.height);
};

Implementar Event Listeners para Movimentos do Mouse

Para tornar nosso efeito de ampliação interativo, adicionaremos event listeners para detectar quando o mouse se move sobre a imagem.

Capturar as coordenadas do mouse sobre o canvas.

// main.js
canvas.onmouseover = function (e) {
  var x = e.clientX;
  var y = e.clientY;
  createSquare(x, y);
};

Agora, queremos garantir que nosso efeito de ampliação siga o movimento do mouse. Implementaremos a função que rastreia esse movimento e atualiza nosso efeito de acordo.

// main.js
// Track the mouse movement to handle the magnifying effect
window.onmousemove = function (e) {
  var x = e.clientX;
  var y = e.clientY;
  // Determine if the mouse is over the canvas
  if (
    x >= canvas.offsetLeft &&
    x <= canvas.offsetLeft + canvas.width &&
    y >= canvas.offsetTop &&
    y <= canvas.offsetTop + canvas.height
  ) {
    createSquare(x, y); // Update the magnifying effect
  } else {
    hideSquare(); // Hide the magnifying effect when the mouse is out
    hideCanvas();
  }
};

Criar Funções Auxiliares para o Seletor e Exibição Ampliada

A funcionalidade principal do nosso script envolve a criação do efeito de ampliação e a cópia da seção necessária da nossa imagem. Vamos definir essas funcionalidades agora.

Definir funções para mostrar ou ocultar o quadrado e o canvas de cópia.

// main.js
function showSquare() {
  square.style.display = "block";
}

function hideSquare() {
  square.style.display = "none";
}

function showCanvas() {
  copycanvas.style.display = "inline";
}

function hideCanvas() {
  copycanvas.style.display = "none";
}

Criar o efeito de ampliação.

function createSquare(x, y) {
  // Ajustes de posição para manter o quadrado dentro dos limites do canvas
  x = x - 45 < canvas.offsetLeft ? canvas.offsetLeft : x - 45;
  y = y - 45 < canvas.offsetTop ? canvas.offsetTop : y - 45;

  x = x + 90 < box.right ? x : box.right - 90;
  y = y + 90 < box.bottom ? y : box.bottom - 90;

  squaredata.left = x; // Update global state
  squaredata.top = y;

  moveSquare(x, y); // Position the square
  copy(); // Invoke the magnifying effect
}

Posicionar o quadrado e invocar a ampliação.

// Function to move the square selector and the magnified display
function moveSquare(x, y) {
  square.style.left = x + "px";
  square.style.top = y + "px";
  showCanvas();
  showSquare();
}

Criar o efeito ampliado no canvas de cópia.

function copy() {
  copycontext.drawImage(
    canvas, // Specify the source canvas
    squaredata.left - box.left, // Position to start copying from
    squaredata.top - box.top,
    90, // Width and height of the data to copy
    90,
    0, // Destination position on the copy canvas
    0,
    copycanvas.width,
    copycanvas.height
  );
}

Executar o Projeto

Abra index.html em um navegador web.
Passe o mouse sobre a imagem para ver o efeito de ampliação.
O efeito da página é o seguinte:

Resumo

Neste projeto, construímos com sucesso um efeito de lupa usando o recurso canvas em HTML5. Aprendemos a interagir com o método drawImage(), a lidar com eventos de mouse e a tornar nosso efeito responsivo às ações do usuário. Esta é uma versão básica, e muitas melhorias podem ser feitas, como ajustar o nível de ampliação, adicionar uma sobreposição de lupa com aparência real, etc. Feliz codificação!

Implementar um Efeito de Lupa Usando Canvas