Эффект увеличения на изображениях | HTML Canvas

Введение

В этом проекте вы научитесь создавать эффект увеличения изображений с использованием HTML Canvas. Этот эффект часто встречается на галереях изображений или сайтах с продуктами, позволяя пользователям наведать курсор на изображение и получить увеличенный вид определенной части. Эффект увеличения позволяет получить детальное представление без необходимости открывать новое окно или страницу.

👀 Превью

демонстрация эффекта линзы

🎯 Задачи

В этом проекте вы научитесь:

инициализировать и настроить элемент HTML Canvas;
загрузить изображение на холст;
реализовать слушатели событий для движения мыши;
создать вспомогательные функции для селектора и увеличенного отображения.

🏆 Достижения

После завершения этого проекта вы сможете:

использовать API Canvas для рисования и манипулирования изображениями;
отслеживать координаты мыши и реагировать на события движения мыши;
создать эффект увеличения, копируя и отображая часть изображения.

Проектируйте веб-страницу

Мы создадим простую веб-страницу с двумя холстами (canvas и copycanvas) и квадратным div, который будет служить селектором для увеличения.

В index.html добавьте следующее:

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

Настройте холст и загрузите изображение

Теперь мы инициализируем наши холсты, создаем объект изображения и загружаем наше изображение на холст.

Инициализируем холст и его контекст.

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

// Инициализируем копирование холста и его контекст
var copycanvas = document.getElementById("copycanvas");
var copycontext = copycanvas.getContext("2d");

// Инициализируем квадратный селектор
var square = document.getElementById("square");
var squaredata = {};
// Метод getBoundingClientRect позволяет получить координаты верхней, нижней, левой и правой сторон элемента относительно браузера
box = canvas.getBoundingClientRect();

Загружаем изображение и рисуем его на холсте.

var image = new Image();
image.src = "corgi.png";
image.onload = function () {
  // Здесь используется метод холста для рисования изображений
  context.drawImage(image, 0, 0, canvas.width, canvas.height);
};

Реализуйте слушатели событий для движения мыши

Чтобы сделать наш эффект увеличения интерактивным, мы добавим слушатели событий, чтобы определить, когда мышь движется над изображением.

Захватываем координаты мыши над холстом.

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

Теперь мы хотим убедиться, что наш эффект увеличения следует за движением мыши. Мы реализуем функцию, которая отслеживает это движение и обновляет наш эффект соответственно.

// main.js
// Отслеживаем движение мыши для обработки эффекта увеличения
window.onmousemove = function (e) {
  var x = e.clientX;
  var y = e.clientY;
  // Определяем, находится ли мышь над холстом
  if (
    x >= canvas.offsetLeft &&
    x <= canvas.offsetLeft + canvas.width &&
    y >= canvas.offsetTop &&
    y <= canvas.offsetTop + canvas.height
  ) {
    createSquare(x, y); // Обновляем эффект увеличения
  } else {
    hideSquare(); // Скрываем эффект увеличения, когда мышь покидает область
    hideCanvas();
  }
};

Создайте вспомогательные функции для селектора и увеличенного отображения

Основная функциональность нашего скрипта заключается в создании эффекта увеличения и копировании необходимой части нашего изображения. Теперь определим эти функциональности.

Определяем функции для отображения или скрытия квадрата и копирования холста.

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

Создаем эффект увеличения.

function createSquare(x, y) {
  // Корректировка позиции, чтобы квадрат оставался внутри границ холста
  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; // Обновляем глобальное состояние
  squaredata.top = y;

  moveSquare(x, y); // Устанавливаем позицию квадрата
  copy(); // Вызываем эффект увеличения
}

Устанавливаем позицию квадрата и вызываем увеличение.

// Функция для перемещения квадратного селектора и увеличенного отображения
function moveSquare(x, y) {
  square.style.left = x + "px";
  square.style.top = y + "px";
  showCanvas();
  showSquare();
}

Создаем увеличенный эффект на копируемом холсте.

function copy() {
  copycontext.drawImage(
    canvas, // Указываем исходный холст
    squaredata.left - box.left, // Позиция, с которой начинаем копирование
    squaredata.top - box.top,
    90, // Ширина и высота данных для копирования
    90,
    0, // Целевая позиция на копируемом холсте
    0,
    copycanvas.width,
    copycanvas.height
  );
}

Запустите проект

Откройте index.html в веб-браузере.
Наведите курсор на изображение, чтобы увидеть эффект увеличения.
Эффект страницы выглядит следующим образом:

Резюме

В этом проекте мы успешно создали эффект увеличения с использованием возможностей холста в HTML5. Мы узнали, как взаимодействовать с методом drawImage(), обрабатывать события мыши и делать наш эффект отзывчивым на действия пользователя. Это базовая версия, и можно сделать много улучшений, например, настроить уровень увеличения, добавить наложение逼真ного увеличения и т.д. Удачной разработки!

Реализация эффекта увеличения с использованием холста