Vergrößerungseffekt auf Bilder | HTML Canvas

Einführung

In diesem Projekt lernst du, wie du mit der HTML Canvas einen Vergrößerungseffekt auf Bilder erzeugen kannst. Dieser Effekt ist oft auf Bildgalerien oder Produktwebsites zu sehen und ermöglicht es Benutzern, über ein Bild zu schweben und einen vergrößerten Ausschnitt zu erhalten. Der Vergrößerungseffekt bietet eine detaillierte Ansicht ohne dass ein neues Fenster oder eine neue Seite geöffnet werden muss.

👀 Vorschau

magnifying glass effect demo

🎯 Aufgaben

In diesem Projekt wirst du lernen:

Wie du ein HTML Canvas-Element initialisierst und einrichtest
Wie du ein Bild auf die Canvas lädst
Wie du Ereignislistener für Mausbewegungen implementierst
Wie du Hilfsfunktionen für die Auswahl und die vergrößerte Anzeige erstellst

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

Die Canvas-API zum Zeichnen und Bearbeiten von Bildern zu verwenden
Die Mauskoordinaten zu verfolgen und auf Mausbewegungsevents zu reagieren
Einen Vergrößerungseffekt zu erzeugen, indem du einen Ausschnitt eines Bilds kopierst und anzeigt

Entwerfe die Webseite

Wir werden eine einfache Webseite entwerfen, die zwei Canvas-Elemente (canvas und copycanvas) und einen Quadrat-Div enthält, das als Selektierer für die Vergrößerung fungieren wird.

Füge in index.html Folgendes hinzu:

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

Stelle die Canvas ein und lade das Bild

Jetzt werden wir unsere Canvas-Elemente initialisieren, ein Image-Objekt erstellen und unser Bild in die Canvas laden.

Initialisiere die Canvas und ihren Kontext.

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

// Initialisiere die Kopie der Canvas und ihren Kontext
var copycanvas = document.getElementById("copycanvas");
var copycontext = copycanvas.getContext("2d");

// Initialisiere den Quadrat-Selektor
var square = document.getElementById("square");
var squaredata = {};
// Die getBoundingClientRect-Methode kann die oberen, unteren, linken und rechten Koordinaten des Elements relativ zum Browser abrufen
box = canvas.getBoundingClientRect();

Lade das Bild und zeichne es auf die Canvas.

var image = new Image();
image.src = "corgi.png";
image.onload = function () {
  // Hier wird die Canvas-Methode zum Zeichnen von Bildern verwendet
  context.drawImage(image, 0, 0, canvas.width, canvas.height);
};

Implementiere Ereignislistener für Mausbewegungen

Um unseren Vergrößerungseffekt interaktiv zu machen, werden wir Ereignislistener hinzufügen, um zu erkennen, wenn die Maus über dem Bild bewegt wird.

Fange die Mauskoordinaten über der Canvas auf.

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

Jetzt möchten wir sicherstellen, dass unser Vergrößerungseffekt der Mausbewegung folgt. Wir werden die Funktion implementieren, die diese Bewegung verfolgt und unseren Effekt entsprechend aktualisiert.

// main.js
// Verfolge die Mausbewegung, um den Vergrößerungseffekt zu behandeln
window.onmousemove = function (e) {
  var x = e.clientX;
  var y = e.clientY;
  // Bestimme, ob die Maus über der Canvas ist
  if (
    x >= canvas.offsetLeft &&
    x <= canvas.offsetLeft + canvas.width &&
    y >= canvas.offsetTop &&
    y <= canvas.offsetTop + canvas.height
  ) {
    createSquare(x, y); // Aktualisiere den Vergrößerungseffekt
  } else {
    hideSquare(); // Verberge den Vergrößerungseffekt, wenn die Maus weg ist
    hideCanvas();
  }
};

Erstelle Hilfsfunktionen für den Selektoren und die vergrößerte Anzeige

Die Hauptfunktionalität unseres Skripts besteht darin, den Vergrößerungseffekt zu erzeugen und den notwendigen Ausschnitt unseres Bilds zu kopieren. Definieren wir diese Funktionalitäten jetzt.

Definiere Funktionen, um das Quadrat und die Kopie der Canvas anzuzeigen oder zu verbergen.

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

Erstelle den Vergrößerungseffekt.

function createSquare(x, y) {
  // Positionsanpassungen, um das Quadrat innerhalb der Canvas-Grenzen zu halten
  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; // Aktualisiere den globalen Zustand
  squaredata.top = y;

  moveSquare(x, y); // Positioniere das Quadrat
  copy(); // Rufe den Vergrößerungseffekt auf
}

Positioniere das Quadrat und rufe die Vergrößerung auf.

// Funktion, um den Quadrat-Selektor und die vergrößerte Anzeige zu bewegen
function moveSquare(x, y) {
  square.style.left = x + "px";
  square.style.top = y + "px";
  showCanvas();
  showSquare();
}

Erstelle den vergrößerten Effekt auf der Kopie der Canvas.

function copy() {
  copycontext.drawImage(
    canvas, // Geben Sie die Quellcanvas an
    squaredata.left - box.left, // Position, von der aus kopiert werden soll
    squaredata.top - box.top,
    90, // Breite und Höhe der zu kopierenden Daten
    90,
    0, // Zielposition auf der Kopie der Canvas
    0,
    copycanvas.width,
    copycanvas.height
  );
}

Führe das Projekt aus

Öffne index.html in einem Webbrowser.
Bewege die Maus über das Bild, um den Vergrößerungseffekt zu sehen.
Der Effekt der Seite ist wie folgt:

Zusammenfassung

In diesem Projekt haben wir erfolgreich einen Vergrößerungseffekt mit der Canvas-Funktion in HTML5 erstellt. Wir haben gelernt, wie man mit der drawImage()-Methode interagiert, Mausereignisse behandelt und unseren Effekt auf Benutzeraktionen reagieren lässt. Dies ist eine Basisversion, und es können viele Verbesserungen vorgenommen werden, wie z. B. die Anpassung des Vergrößerungsgrades, Hinzufügen eines realistischen Vergrößerungsglas-Überlays usw. Viel Spaß beim Programmieren!

Implementiere einen Vergrößerungseffekt mit der Canvas