概要
JS/ES/JQueryで、ローカルのファイルを読み込んでcanvasに表示する手順。
大まかな流れは以下の通り。
Imageクラスのオブジェクトを準備するdocument読み込み後(onload/ready)に以下を実行canvas要素の取得canvasからcontextの取得- 画像ファイル選択時の処理
- 選択されたファイルの
Fileオブジェクトの取得 FileReaderオブジェクトを構築FileReaderにdata:URLとして読み込みFileReaderの読み込み完了時のリスナー登録- 読込後にリーダーの読み込み結果を
Image.srcにセット
- 読込後にリーダーの読み込み結果を
- 選択されたファイルの
Imageオブジェクトのロード後のリスナー登録context.drawImageでcanvasに描画
HTML
body内のhtmlは以下の通り。
|
1 2 3 4 |
<div class="input_area"> <input type="file" id="file_choice"> </div> <canvas id="canvas" width="640" height="480"></canvas> |
input要素のtype属性をfileとすることで、HTML5のAPIが利用可能となる。
canvasのサイズは、ここではhtmlで設定しているが、スクリプトで動的に設定して画像サイズとcanvasのサイズを合わせることもできる。
JavaScript
全体の構造は以下の通り。ドキュメント内でグローバルに使う可能性があるImageオブジェクト以外は、onload/ready後の処理に入れている。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
let image = new Image(); $(() => { let canvas = $('#canvas')[0]; let context = canvas.getContext('2d'); $('#file_choice').on('change', (e) => { let file = e.target.files[0]; let reader = new FileReader(); reader.readAsDataURL(file); reader.onload = () => { image.src = reader.result; } }); $(image).load(() => { context.drawImage(image, 0, 0, canvas.width, canvas.height); }); }); |