Canvas zoom in-out

by bc_rikko

HTML

<div id="image">
</div>

<div class="slider">
  <span>縮小</span>
  <input id="zoom-slider" type="range">
  <span>拡大</span>
</div>

JavaScript

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

const img = new Image();
img.src = 'https://ja.wikipedia.org/static/images/project-logos/jawiki.png';
img.crossOrigin = 'anonymous';

img.onload = () => {
  // Canvasを画像のサイズに合わせる
  canvas.height = img.height;
  canvas.width  = img.width;

  // Canvasに描画する
  ctx.drawImage(img, 0, 0);
};

img.onerror = () => {
  console.log('画像の読み込み失敗');
};


const slider = document.getElementById('zoom-slider');
slider.value = 1;
// 倍率の最小・最大値
slider.min = 0.01;
slider.max = 2;
// 粒度
slider.step = 'any';

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