fileapiの検索結果1 - 1 件 / 1件

• あとで読む

  FileAPIで画像を読み込み canvasに描画 | 404 motivation not found

  • 3 users
  • tech-blog.s-yoshiki.com
  • 暮らし
  • 2020/01/19

  目次 概要流れimageonloadを使う方法追記概要 「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 r