canvasで表示した画像を中央表示の状態で、inputのrangeを使って拡大・縮小したい。

Question

前提・実現したいこと

読み込んだ画像をinput type="range"で拡大・縮小の操作を中央表示で行いたいです。
現状、左上始点での拡大・縮小まではできたのですが、drawImageの部分を400,250などにしても
始点が中央になるだけで拡大自体は右下に向かって拡大されてしまいます。

どういった記載をすれば対応可能か知恵をいただけると助かります。

該当のソースコード

<div style="width:250px; float:left; margin-right:15px;">
<div class="slider">
	<p>拡大・縮小</p>
	<input id="renz-slider" type="range">
</div>
</div>
<div style="width:800px; float:left; background-color:#aaa;" id="image"></div>

const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d');
document.getElementById('image').appendChild(canvas);

const img = new Image();
img.src = 'https://1.bp.blogspot.com/-s7wD--x4LBo/WUJZO318J0I/AAAAAAABE1k/cLyYpUhHxzou8EfHWbcd02LpnTfHU006gCLcBGAs/s1600/logo_sml.png';
img.onload = () => {
  // Canvasサイズを指定。
  canvas.height = 450;
  canvas.width  = 800;
  // Canvasに上に入れたURLの画像を描画する。canvasサイズ-画像サイズ/2で中央に表示を指定。
  ctx.drawImage(img, (canvas.width - img.width) / 2, (canvas.height - img.height) / 2);
};
img.onerror = () => { console.log('画像の読み込み失敗'); };


// 拡大・縮小の作動をする部分。
const slider = document.getElementById('renz-slider');
// 通常サイズ、倍率の最小・最大値、スライダーの段階
slider.value = 1;
slider.min = 0.5;
slider.max = 3;
slider.step = 'any';
// スライダーが動いたら拡大・縮小して再描画する
slider.addEventListener('input', e => {
	console.log('レンズ焦点距離のスライダーが読み込まれました！');
	// 一旦クリア 
	ctx.clearRect(0, 0, canvas.width, canvas.height);
	// 倍率変更
	const scale = e.target.value;
	ctx.scale(scale, scale);
	// 再描画
	ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
	ctx.scale(1 / scale, 1 / scale);
});

Answer 1

まず、Canvasで画像を拡大縮小する方法についてですが、drawImage()だけでできます。

/* drawImage(Image, コピー元 X, コピー元 Y, コピー元 Width, コピー元 Height,
 *                  コピー先 X, コピー先 Y, コピー先 Width, コピー先 Height);
 */
context.drawImage(img, 0, 0, img.width, img.height,
                       0, 0, img.width * scale, img.height * scale);

その上で、画像の描画位置を中央にすればよいので、以下のようになります。
ご質問のコードにある「canvasサイズ-画像サイズ/2で中央に表示」と同じです。

// スライダーが動いたら拡大・縮小して再描画する
slider.addEventListener('input', e => {
    // 一旦クリア 
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    // 倍率変更
    const scale = Number(e.target.value);
    // 再描画
    ctx.drawImage(img, 0, 0, img.width, img.height,
                  (canvas.width - img.width * scale) / 2,
                  (canvas.height - img.height * scale) / 2,
                  img.width * scale, img.height * scale);
});

参考：クライアント側でcanvasを使って画像をリサイズする - Qiita

Comments

[退会済みユーザー]

教えていただきありがとうございます！！
遠回りな書き方を私はしてしまっていたんですね…！
説明と参考までいただき大変助かりました、ありがとうございました！