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

前提・実現したいこと

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

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

該当のソースコード

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

javascript
1const canvas = document.createElement('canvas');
2const ctx = canvas.getContext('2d');
3document.getElementById('image').appendChild(canvas);
4
5const img = new Image();
6img.src = 'https://1.bp.blogspot.com/-s7wD--x4LBo/WUJZO318J0I/AAAAAAABE1k/cLyYpUhHxzou8EfHWbcd02LpnTfHU006gCLcBGAs/s1600/logo_sml.png';
7img.onload = () => {
8  // Canvasサイズを指定。
9  canvas.height = 450;
10  canvas.width  = 800;
11  // Canvasに上に入れたURLの画像を描画する。canvasサイズ-画像サイズ/2で中央に表示を指定。
12  ctx.drawImage(img, (canvas.width - img.width) / 2, (canvas.height - img.height) / 2);
13};
14img.onerror = () => { console.log('画像の読み込み失敗'); };
15
16
17// 拡大・縮小の作動をする部分。
18const slider = document.getElementById('renz-slider');
19// 通常サイズ、倍率の最小・最大値、スライダーの段階
20slider.value = 1;
21slider.min = 0.5;
22slider.max = 3;
23slider.step = 'any';
24// スライダーが動いたら拡大・縮小して再描画する
25slider.addEventListener('input', e => {
26	console.log('レンズ焦点距離のスライダーが読み込まれました！');
27	// 一旦クリア 
28	ctx.clearRect(0, 0, canvas.width, canvas.height);
29	// 倍率変更
30	const scale = e.target.value;
31	ctx.scale(scale, scale);
32	// 再描画
33	ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
34	ctx.scale(1 / scale, 1 / scale);
35});

行動規範の内容に同意します

回答1件

ベストアンサー

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

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

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

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