JS/ES – 画像ファイルを読み込んでcanvasに表示

概要

JS/ES/JQueryで、ローカルのファイルを読み込んでcanvasに表示する手順。

大まかな流れは以下の通り。

Imageクラスのオブジェクトを準備する
document読み込み後(onload/ready)に以下を実行
1. canvas要素の取得
2. canvasからcontextの取得
3. 画像ファイル選択時の処理
  1. 選択されたファイルのFileオブジェクトの取得
  2. FileReaderオブジェクトを構築
  3. FileReaderにdata:URLとして読み込み
  4. FileReaderの読み込み完了時のリスナー登録
    - 読込後にリーダーの読み込み結果をImage.srcにセット
4. Imageオブジェクトのロード後のリスナー登録
  - context.drawImageでcanvasに描画

HTML

body内のhtmlは以下の通り。

<div class="input_area">
  <input type="file" id="file_choice">
</div>
<canvas id="canvas" width="640" height="480"></canvas>

</div>

input要素のtype属性をfileとすることで、HTML5のAPIが利用可能となる。

canvasのサイズは、ここではhtmlで設定しているが、スクリプトで動的に設定して画像サイズとcanvasのサイズを合わせることもできる。

JavaScript

全体の構造は以下の通り。ドキュメント内でグローバルに使う可能性があるImageオブジェクト以外は、onload/ready後の処理に入れている。

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);
  });

});

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);

});

TauStation

JS/ES – 画像ファイルを読み込んでcanvasに表示

概要

HTML

JavaScript

コメントを残すコメントをキャンセル

概要

HTML

JavaScript

コメントを残す コメントをキャンセル

コメントを残すコメントをキャンセル