画像の拡大鏡効果 | HTML キャンバス

はじめに

このプロジェクトでは、HTML Canvas を使って画像に拡大効果を作成する方法を学びます。この効果は、画像ギャラリーや商品サイトでよく見られ、ユーザーが画像の上にマウスを乗せると特定の部分を拡大表示できるようにします。拡大効果により、新しいウィンドウやページを開くことなく詳細な表示を行うことができます。

👀 プレビュー

拡大鏡効果のデモ

🎯 タスク

このプロジェクトで学ぶことは以下の通りです。

HTML Canvas 要素を初期化して設定する方法
画像を Canvas に読み込む方法
マウスの動きに対するイベントリスナーを実装する方法
セレクターと拡大表示用のヘルパー関数を作成する方法

🏆 成果

このプロジェクトを完了すると、以下のことができるようになります。

Canvas API を使って画像を描画し操作する
マウスの座標を追跡し、マウスの動きのイベントに応答する
画像の一部をコピーして表示することで拡大効果を作成する

ウェブページをデザインする

2 つのキャンバス (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() メソッドとのやり取り方法、マウスイベントの処理方法、そしてユーザーの操作に応答するように効果を作る方法を学びました。これは基本バージョンであり、拡大率を調整したり、本物のような拡大鏡のオーバーレイを追加したりなど、多くの改善を加えることができます。楽しいコーディングを！

キャンバスを使った拡大鏡効果の実装