忍者ブログ

VB.NET-TIPS などプログラミングについて

VB.NETのTIPS(小技集)を中心に、Javascript、PHP その他のプログラミングについて少し役に立つ情報を発信します。いわゆる個人的な忘備録ですが、みなさんのお役に立てれば幸いです。

JavaScript jQueryでFileReaderを使いcanvasに画像ファイルを表示する方法

FileReader オブジェクトを使うと、ローカルなコンピューター内にある画像ファイルをウェブアプリケーションから非同期的に読み込むことが出来ます。 今回はこの FileReader を使って canvas に画像ファイルを描画する方法について説明します。 尚、画像ファイルの指定は input タグで type="file" とします。

処理の手順は以下の通りです

  • FileReader を生成画像の描画
  • FileReaderreadAsDataURL メソッドでファイル読込
  • FileReaderonload イベントで 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

コメント

コメントを書く