JavaScript 画像ファイルを読み込んでcanvasに表示する #JavaScript

前書き

　自作WEBアプリで躓いたので思い出せるようにメモ。とりあえず機能のみを実装

環境

　ブラウザ：Google Chrome
　言語：JavaScript(ライブラリ、フレームワークの使用なし)

HTML

設定すること
・画像を読み込むボタン
・画像を表示するcanvas
・CSSとJavaScriptは個人的に分けたいので分けています

index.html

<DOCTYPE HTML5>
<html>
 <head>
  <!--CSSファイルの読み込み-->
  <link rel="stylesheet" type="text/css" href="./index.css">
 </head>
 <body>
  <!--ファイルの読み込み　拡張子をPNG, JPEGに設定-->
  <input type="file" id="selectFile" accept=".png,.jpeg">

  <!--canvasの描画-->
  <canvas id="canvas"><canvas>

  <!--.jsファイルの読み込み-->
  <script type="text/javascript" src="index.js"></script>
 </body>
</html>

CSS

index.css



canvas{
  width: 300px;
  height: 400px;
  border: solid 1px #000;
}

この時点での表示内容はこのような形

JavaScriptで実装

実装する機能
・input type="file"のファイルの取得
・ファイルのURLの取得
・canvasのsrcにファイルのURLを設定

index.js

var selFile = document.getElementById('selectFile'); // input type="file"の要素取得
var c = document.getElementById('canvas'); // canvasの要素取得
var ctx = c.getContext('2d');

selFile.addEventListener("change", function(evt){
 var file = evt.target.files; // fileの取得
 var reader = new FileReader();

 reader.readAsDataURL(file[0]); // fileの要素をdataURL形式で読み込む

 // ファイルを読み込んだ時に実行する
 reader.onload = function(){
  var dataUrl = reader.result; // 読み込んだファイルURL
  var img = new Image(); // 画像

  img.src = dataUrl;

  // 画像が読み込んだ時に実行する
　img.onload = function() {
   // canvasに画像ソースを設定する
   ctx.drawImage(img, 0, 0);

   // 画像のサイズを設定する場合
   // ctx.drawImage(img, 0, 0, 300, 400); heightとwidthも合わせて設定可能
   }
  }
}, false);

実装結果

ファイルを選択するとcanvasに画像が表示されるようになる

参考

・画像ファイルの読み込み(https://javascript.programmer-reference.com/js-canvas-draw/)
・画像をcanvasに表示する(https://www.pazru.net/html5/File/040.html)