[jQuery] 画像アップロード時にプレビュー表示する（canvas版）

投稿日：2017年11月17日更新日：2018年5月2日

画像アップロード時にプレビュー表示するサンプルです。
※canvas領域にプレビューします。

サンプルソース

例）画像を指定すると画像をプレビュー表示する

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>サンプル</title>
<script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
<script>
$(function(){
  $('#myfile').change(function(e){

    var file = e.target.files[0];
    var reader = new FileReader();

    //2Dコンテキストのオブジェクトを生成する
    var cvs = document.getElementById('cvs1');
    var ctx = cvs.getContext('2d');

    //画像でない場合は処理終了
   if(file.type.indexOf("image") < 0){
      return false;
    }

    //アップロードした画像を設定する
    reader.onload = (function(file){
      return function(e){

        var img = new Image();
        img.src = e.target.result;
        img.onload = function() {
          ctx.drawImage(img, 0, 0, 300, 300);
        }
      };
    })(file);
    reader.readAsDataURL(file);
  });

});
</script>
</head>
<body>
<input type="file" id="myfile"><br>
<canvas id="cvs1" width="300" height="300"></canvas>
</body>
</html>

<!DOCTYPE html>

<head>

$(function(){

$('#myfile').change(function(e){

var file = e.target.files[0];

var reader = new FileReader();

//2Dコンテキストのオブジェクトを生成する

var cvs = document.getElementById('cvs1');

var ctx = cvs.getContext('2d');

//画像でない場合は処理終了

if(file.type.indexOf("image") < 0){

return false;

}

//アップロードした画像を設定する

reader.onload = (function(file){

return function(e){

var img = new Image();

img.src = e.target.result;

img.onload = function() {

ctx.drawImage(img, 0, 0, 300, 300);

}

};

})(file);

reader.readAsDataURL(file);

});

</script>

</head>

<body>

</body>

</html>

実行サンプル

画像ファイルを指定するとプレビュー表示します。

以下の灰色の部分がcanvas領域です。

解説

imgタグにプレビュー表示するサンプルは、以下ページをご覧ください。
→ [jQuery] 画像アップロード時にプレビュー表示する（imageタグ版）

執筆者：とら