概要
html5を使ってローカルに有る画像ファイルを表示する簡単なhtmlを作ってみました。イメージの描画にcanvasを使用しています。
参考にさせて頂いたページ
http://qiita.com/junya/items/0f977ae7f8f620fd83e7
http://d.hatena.ne.jp/oovu70/20111122/p1
ソースの説明
ファイルの読み込みに加え、イメージのロードも非同期になりますので、コールバックで処理をしないとcanvasへの描画は上手くいきません。
1. html要素として予め定義しているcanvasをセレクトしています。
2. getContext()メソッドで描画機能を有効にしています。jQueryのセレクタを使っていますのでcanvas[0]とします。
3. naturalHeight, naturalWidthでイメージのサイズを得ることが出来ます。縦横比を維持して表示サイズを変更しています。
4. canvasのサイズを画像に合わせて変更しています。方法として妥当かどうかは解りませんが、attrメソッドを使うとcanvasが初期化されるようで、連続して動作させた場合にゴミが残りません。width/heightメソッドだとゴミが残ります。
5. drawImageの引数指定でリザイズをさせています。
index.html
<!DOCTYPE HTML>
<html lang="ja">
<head>
<meta charset="UTF-8">
<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<title>画像ファイルをCANVASでプレビュー</title>
</head>
<body>
<h1>画像を選択してください。</h1>
<form id="my_form">
<input id="ufile" name="ufile" type="file" accept="image/jpeg,image/png"><br>
</form>
<hr>
<div>
<h1>プレビュー</h1>
<canvas id="cnvs"></canvas> <!-- canvas要素を配置 -->
</div>
<script>
$(function(){
// id="ufile"の変化でコールバック
$("#ufile").change(function(){
// 選択ファイルの有無をチェック
if (!this.files.length) {
alert('ファイルが選択されていません');
return;
}
// Formからファイルを取得
var file = this.files[0];
// (1) HTMLのCanvas要素の取得
var canvas = $("#cnvs");
// (2) getContext()メソッドで描画機能を有効にする
var ctx = canvas[0].getContext('2d');
// 描画イメージインスタンス化
var image = new Image();
// File API FileReader Objectでローカルファイルにアクセス
var fr = new FileReader();
// ファイル読み込み読み込み完了後に実行 [非同期処理]
fr.onload = function(evt) {
// 画像がロードされた後にcanvasに描画を行う [非同期処理]
image.onload = function() {
// (3) プレビュー(Cnavas)のサイズを指定
var cnvsH = 240;
var cnvsW = image.naturalWidth*cnvsH/image.naturalHeight;
// (4) Cnavasにサイズアトリビュートを設定する
canvas.attr('width', cnvsW);
canvas.attr('height', cnvsH);
// (5) 描画
ctx.drawImage(image, 0, 0, cnvsW, cnvsH);
}
// 読み込んだ画像をimageのソースに設定
image.src = evt.target.result;
}
// fileを読み込む データはBase64エンコードされる
fr.readAsDataURL(file);
})
})
</script>
</body>
</html>
確認
Firefox 47.0
Chrome 51.0.2704.84m
Edge 25.10586.0.0
IE 11.306.10586.0
で確認しました。