Efecto de aumento de tamaño en imágenes | Lienzo HTML

Introducción

En este proyecto, aprenderás a crear un efecto de aumento de tamaño en imágenes utilizando el HTML Canvas. Este efecto se ve a menudo en galerías de imágenes o sitios web de productos, permitiendo a los usuarios pasar el cursor sobre una imagen y obtener una vista ampliada de una porción específica. El efecto de aumento de tamaño proporciona una vista detallada sin tener que abrir una nueva ventana o página.

👀 Vista previa

🎯 Tareas

En este proyecto, aprenderás:

Cómo inicializar y configurar un elemento HTML Canvas
Cómo cargar una imagen en el lienzo
Cómo implementar oyentes de eventos para los movimientos del mouse
Cómo crear funciones auxiliares para el selector y la visualización ampliada

🏆 Logros

Después de completar este proyecto, podrás:

Utilizar la API del Canvas para dibujar y manipular imágenes
Seguir las coordenadas del mouse y responder a los eventos de movimiento del mouse
Crear un efecto de aumento de tamaño copiando y mostrando una porción de una imagen

Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/DOMManipulationGroup(["DOM Manipulation"]) javascript/BasicConceptsGroup -.-> javascript/functions("Functions") javascript/DOMManipulationGroup -.-> javascript/dom_select("DOM Selection") javascript/DOMManipulationGroup -.-> javascript/dom_manip("DOM Manipulation") javascript/DOMManipulationGroup -.-> javascript/event_handle("Event Handling") subgraph Lab Skills javascript/functions -.-> lab-445721{{"Implementar un efecto de lupa utilizando el lienzo"}} javascript/dom_select -.-> lab-445721{{"Implementar un efecto de lupa utilizando el lienzo"}} javascript/dom_manip -.-> lab-445721{{"Implementar un efecto de lupa utilizando el lienzo"}} javascript/event_handle -.-> lab-445721{{"Implementar un efecto de lupa utilizando el lienzo"}} end

Diseña la página web

Diseñaremos una página web simple con dos lienzos (canvas y copycanvas) y un div cuadrado que actuará como selector para la magnificación.

En index.html, agrega lo siguiente:

<!doctype html>
<html lang="en">
  <head>
    <title>Efecto de magnificación usando 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>

✨ Revisar Solución y Practicar

Configura el lienzo y carga la imagen

Ahora, inicializaremos nuestros lienzos, crearemos un objeto de imagen y cargaremos nuestra imagen en el lienzo.

Inicializa el lienzo y su contexto.

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

// Inicializa el lienzo de copia y su contexto
var copycanvas = document.getElementById("copycanvas");
var copycontext = copycanvas.getContext("2d");

// Inicializa el selector cuadrado
var square = document.getElementById("square");
var squaredata = {};
// El método getBoundingClientRect puede obtener las coordenadas superior, inferior, izquierda y derecha del elemento con respecto al navegador
box = canvas.getBoundingClientRect();

Carga la imagen y dibújala en el lienzo.

var image = new Image();
image.src = "corgi.png";
image.onload = function () {
  // Aquí se utiliza el método del lienzo para dibujar imágenes
  context.drawImage(image, 0, 0, canvas.width, canvas.height);
};

✨ Revisar Solución y Practicar

Implementa oyentes de eventos para los movimientos del mouse

Para hacer que nuestro efecto de aumento de tamaño sea interactivo, agregaremos oyentes de eventos para detectar cuando el mouse se mueve sobre la imagen.

Captura las coordenadas del mouse sobre el lienzo.

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

Ahora, queremos asegurarnos de que nuestro efecto de aumento de tamaño siga el movimiento del mouse. Implementaremos la función que sigue este movimiento y actualiza nuestro efecto en consecuencia.

// main.js
// Sigue el movimiento del mouse para manejar el efecto de aumento de tamaño
window.onmousemove = function (e) {
  var x = e.clientX;
  var y = e.clientY;
  // Determina si el mouse está sobre el lienzo
  if (
    x >= canvas.offsetLeft &&
    x <= canvas.offsetLeft + canvas.width &&
    y >= canvas.offsetTop &&
    y <= canvas.offsetTop + canvas.height
  ) {
    createSquare(x, y); // Actualiza el efecto de aumento de tamaño
  } else {
    hideSquare(); // Oculta el efecto de aumento de tamaño cuando el mouse sale
    hideCanvas();
  }
};

✨ Revisar Solución y Practicar

Crea funciones auxiliares para el selector y la visualización ampliada

La funcionalidad principal de nuestro script implica crear el efecto de aumento de tamaño y copiar la sección necesaria de nuestra imagen. Definamos estas funcionalidades ahora.

Define funciones para mostrar u ocultar el cuadrado y el lienzo de copia.

// 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";
}

Crea el efecto de aumento de tamaño.

function createSquare(x, y) {
  // Ajustes de posición para mantener el cuadrado dentro de los límites del lienzo
  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; // Actualiza el estado global
  squaredata.top = y;

  moveSquare(x, y); // Coloca el cuadrado
  copy(); // Invoca el efecto de aumento de tamaño
}

Coloca el cuadrado e invoca la magnificación.

// Función para mover el selector cuadrado y la visualización ampliada
function moveSquare(x, y) {
  square.style.left = x + "px";
  square.style.top = y + "px";
  showCanvas();
  showSquare();
}

Crea el efecto amplificado en el lienzo de copia.

function copy() {
  copycontext.drawImage(
    canvas, // Especifica el lienzo de origen
    squaredata.left - box.left, // Posición a partir de la cual comenzar a copiar
    squaredata.top - box.top,
    90, // Ancho y alto de los datos a copiar
    90,
    0, // Posición de destino en el lienzo de copia
    0,
    copycanvas.width,
    copycanvas.height
  );
}

✨ Revisar Solución y Practicar

Ejecuta el proyecto

Abre index.html en un navegador web.
Pasa el cursor sobre la imagen para ver el efecto de aumento de tamaño.
El efecto de la página es el siguiente:

✨ Revisar Solución y Practicar

Resumen

En este proyecto, hemos construido con éxito un efecto de lupa utilizando la característica del lienzo en HTML5. Hemos aprendido cómo interactuar con el método drawImage(), manejar eventos del mouse y hacer que nuestro efecto sea reactivo a las acciones del usuario. Esta es una versión básica y se pueden hacer muchas mejoras, como ajustar el nivel de aumento, agregar una superposición de lupa más realista, etc. ¡Que disfrutes de la codificación!