Effet de grossissement sur les images | Canvas HTML

Introduction

Dans ce projet, vous allez apprendre à créer un effet de grossissement sur des images à l'aide de l'élément HTML Canvas. Cet effet est souvent présent sur les galeries d'images ou les sites web de produits, permettant aux utilisateurs de survoler une image et d'obtenir une vue agrandie d'une partie spécifique. L'effet de grossissement fournit une vue détaillée sans avoir à ouvrir une nouvelle fenêtre ou page.

👀 Aperçu

🎯 Tâches

Dans ce projet, vous allez apprendre :

Comment initialiser et configurer un élément HTML Canvas
Comment charger une image sur le canvas
Comment implémenter des écouteurs d'événements pour les mouvements de souris
Comment créer des fonctions d'aide pour le sélecteur et l'affichage agrandi

🏆 Réalisations

Après avoir terminé ce projet, vous serez capable de :

Utiliser l'API Canvas pour dessiner et manipuler des images
Suivre les coordonnées de la souris et répondre aux événements de mouvement de souris
Créer un effet de grossissement en copiant et en affichant une partie d'une image

Conceptez la page web

Nous allons concevoir une page web simple avec deux canevas (canvas et copycanvas) et un carré div qui servira de sélecteur pour le grossissement.

Dans index.html, ajoutez ce qui suit :

<!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>

✨ Vérifier la solution et pratiquer

Configure le canevas et chargez l'image

Maintenant, nous allons initialiser nos canevas, créer un objet image et charger notre image dans le canevas.

Initialisez le canevas et son contexte.

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

// Initialisez le canevas de copie et son contexte
var copycanvas = document.getElementById("copycanvas");
var copycontext = copycanvas.getContext("2d");

// Initialisez le sélecteur carré
var square = document.getElementById("square");
var squaredata = {};
// La méthode getBoundingClientRect peut obtenir les coordonnées du haut, du bas, de gauche et de droite de l'élément par rapport au navigateur
box = canvas.getBoundingClientRect();

Chargez l'image et dessinez-la sur le canevas.

var image = new Image();
image.src = "corgi.png";
image.onload = function () {
  // Ici, la méthode du canevas pour dessiner des images est utilisée
  context.drawImage(image, 0, 0, canvas.width, canvas.height);
};

✨ Vérifier la solution et pratiquer

Implémentez des écouteurs d'événements pour les mouvements de souris

Pour rendre notre effet de grossissement interactif, nous allons ajouter des écouteurs d'événements pour détecter quand la souris passe sur l'image.

Capturez les coordonnées de la souris sur le canevas.

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

Maintenant, nous voulons nous assurer que notre effet de grossissement suit le mouvement de la souris. Nous allons implémenter la fonction qui suit ce mouvement et met à jour notre effet en conséquence.

// main.js
// Suivez le mouvement de la souris pour gérer l'effet de grossissement
window.onmousemove = function (e) {
  var x = e.clientX;
  var y = e.clientY;
  // Déterminez si la souris est sur le canevas
  if (
    x >= canvas.offsetLeft &&
    x <= canvas.offsetLeft + canvas.width &&
    y >= canvas.offsetTop &&
    y <= canvas.offsetTop + canvas.height
  ) {
    createSquare(x, y); // Mettez à jour l'effet de grossissement
  } else {
    hideSquare(); // Cachez l'effet de grossissement quand la souris est hors du canevas
    hideCanvas();
  }
};

✨ Vérifier la solution et pratiquer

Créez des fonctions d'aide pour le sélecteur et l'affichage agrandi

La fonctionnalité principale de notre script consiste à créer l'effet de grossissement et à copier la section nécessaire de notre image. Définissons maintenant ces fonctionnalités.

Définissez des fonctions pour afficher ou masquer le carré et le canevas de copie.

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

Créez l'effet de grossissement.

function createSquare(x, y) {
  // Ajustements de position pour maintenir le carré à l'intérieur des limites du canevas
  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; // Mettez à jour l'état global
  squaredata.top = y;

  moveSquare(x, y); // Positionnez le carré
  copy(); // Appelez l'effet de grossissement
}

Positionnez le carré et appelez la grossissement.

// Fonction pour déplacer le sélecteur carré et l'affichage agrandi
function moveSquare(x, y) {
  square.style.left = x + "px";
  square.style.top = y + "px";
  showCanvas();
  showSquare();
}

Créez l'effet agrandi sur le canevas de copie.

function copy() {
  copycontext.drawImage(
    canvas, // Spécifiez le canevas source
    squaredata.left - box.left, // Position à partir de laquelle commencer à copier
    squaredata.top - box.top,
    90, // Largeur et hauteur des données à copier
    90,
    0, // Position de destination sur le canevas de copie
    0,
    copycanvas.width,
    copycanvas.height
  );
}

✨ Vérifier la solution et pratiquer

Exécutez le projet

Ouvrez index.html dans un navigateur web.
Survolez l'image pour voir l'effet de grossissement.
L'effet de la page est le suivant :

✨ Vérifier la solution et pratiquer

Résumé

Dans ce projet, nous avons réussi à créer un effet de loupe grossissante à l'aide de la fonction canvas en HTML5. Nous avons appris à interagir avec la méthode drawImage(), à gérer les événements de souris et à rendre notre effet réactif aux actions de l'utilisateur. Il s'agit d'une version de base, et de nombreuses améliorations peuvent être apportées, telles que l'ajustement du niveau de grossissement, l'ajout d'un voile de loupe ressemblant à la réalité, etc. Bonne programmation!