FileAPIで画像を読み込み canvasに描画

目次

1. 概要
2. 流れ
3. imageonloadを使う方法
4. 追記

概要

「FileAPIを使って画像を読み込み、イベント終了と同時に自動的にcanvasに描画したい！」

FileAPIを使って読み込んだ画像を、imgタグを使って画像を表示をすることは容易であったが、 canvasに描画するのに少々手間取ったので、これをメモとして残すことにしました。

流れ

• FileAPIでローカルにある任意の画像を選択し読み込む
• canvasに描画

Image.onloadを使う方法

Image.onloadを使えば一発だった。

const canvas = document.getElementById('canvas');

document.querySelector('input[type="file"]').onchange = function() {
  let img = this.files[0];
  let reader = new FileReader();
  reader.readAsDataURL(img);
  reader.onload = function() {
    drawImage(reader.result);
  };
};

function drawImage(url) {
  let ctx = canvas.getContext('2d');
  let image = new Image();
  image.src = url;
  image.onload = () => {
    canvas.width = image.width;
    canvas.height = image.height;
    ctx.drawImage(image, 0, 0);
  };
}

追記

デモを作りました。

別ウィンドウで開く