FileReader オブジェクトを使うと、ローカルなコンピューター内にある画像ファイルをウェブアプリケーションから非同期的に読み込むことが出来ます。 今回はこの FileReader を使って canvas に画像ファイルを描画する方法について説明します。 尚、画像ファイルの指定は input タグで type="file" とします。
処理の手順は以下の通りです
- FileReader を生成画像の描画
- FileReader の readAsDataURL メソッドでファイル読込
- FileReader の onload イベントで canvas への画像表示関数の実行
■FileReaderを使いcanvasに画像ファイルを表示
<html>
<head>
<meta charset="utf-8">
<title>test ajax</title>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
//Image関数
function drawImage(imageFile) {
var canvas = $("#canvas");
var ctx = canvas[0].getContext("2d");
//イメージオブジェクト
var img1 = new Image();
//画像ファイル指定でファイル読込開始
img1.src = imageFile;
//画像ロード後に画像を描画できる。
img1.onload = function(){
//画像の大きさを設定
width = img1.width;
height = img1.height;
canvas.attr('width' , width);
canvas.attr('height', height);
//画像を描画
ctx.drawImage(img1, 0, 0, width, height);
}
return false;
}
//ページロード時イベント宣言
$(function() {
var file = null; // 選択されるファイル
//ファイル選択時イベント宣言
$("input[type=file]").change(function() {
//ファイルを取得
file = $(this).prop("files")[0];
//FileReader API
var reader = new FileReader();
//ファイルロード終了時イベント宣言
reader.onload = function(e) {
//画像表示関数コール
drawImage(e.target.result);
};
//fileを読込の開始
reader.readAsDataURL(file);
});
});
</script>
</head>
<body>
<h2>test canvas</h2>
<canvas id="canvas" width="100" height="100" ></canvas>
<br />
<input type="file" accept="image/*" />
</body>
</html>
PR
コメント