##前書き
自作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)