いきさつ

canvasを使って画像のリサイズをしたり、

画像のくり抜きがしたかったので、まずはcanvasで画像を表示できるようにした。

手順

1. input type='file'で画像を登録できるようにする

<input type="file" id='file'>

2. fileを登録した時にイベントが発火するようにする

/** input要素の取得 */
const input = document.getElementById('file');

/** inputに画像を追加した時にイベントを受け取る */
input.addEventListener('change', function(e) {
  /** 処理 */
}

3. 処理を書く

/** inputに画像を追加した時にイベントを受け取る */
input.addEventListener('change', function(e) {

  /** File オブジェクトを読み込む */
  const file = e.currentTarget.files[0];
  const fr = new FileReader();

  fr.onload = function() {
    /** ファイルが読み込まれたあとの処理 */
    const image = new Image();
    
    /** 画像がimageタグに読み込まれた後の処理 */
    image.onload = function() {
      ctx.beginPath() ;
      ctx.drawImage(this, 50, 0, 400, 400, 0, 0, 200, 200);   
    }
    image.src = fr.result;
  }
  fr.readAsDataURL(file);
});

解説1

canvasで画像を描く際、drawImageというメソッドを用います。

drawImage(image, sx, sy, sw, sh, dx, dy, dw, dh)

imageはHTMLImageElement, HTMLCanvasElement, HTMLVideoElement のいずれかを取ることができます。

ということは、まずはHTMLImageElemenetを生成する必要があります。

解説2

const image = new Image();

でHTMLImageElemenetが生成できます。が、

Imageのsrcを指定する必要があります。

    const image = new Image();
    
    /** 画像がimageタグに読み込まれた後の処理 */
    image.onload = function() {
      ctx.beginPath() ;
      ctx.drawImage(this, 50, 0, 400, 400, 0, 0, 200, 200);   
    }
    image.src = fr.result;

こんな感じで。

fr.resultはFileReaderがFileオブジェクトを読み込んだ際の結果です。

ソースコード

jsfiddle.net