drawImage doesnt work in canvas

Question

I would like to use canvas to compress image file uploaded by user.

my js code is here.

function canvasDraw() {
  var file = $("#imageSelect").prop("files")[0];


  if (file["type"] != "image/jpeg" && file["type"] != "image/png" && file["type"] != "image/gif") {
    $("#imageSelect").val(''); 

  } else {
    var fr = new FileReader();

    fr.onload = function() {
      $("#preview").attr('src', fr.result);

      var image = new Image(); 
      image.src = $("#preview").attr('src');
      var w = 800;
      var ratio = w / image.width;
      var h = image.height * ratio;

      var canvas = $("#canvas");
      var ctx = canvas[0].getContext('2d');
      $("#canvas").attr("width", w);
      $("#canvas").attr("height", h);
      ctx.drawImage(image, 0, 0, w, h);
    };

    fr.readAsDataURL(file);
  }
}



<input type="file" name="picture" class='picture' accept="image/*" size="30" id="imageSelect" onChange="canvasDraw();" >
<img src="" id="preview" />
<canvas id="canvas"></canvas>

But in canvas, there is no image shown. image.width and image.height doesnt work. And ctx.drawImage(image, 0, 0, w, h) doesnt work. Could you tell me why I have this problem?

Answer 1

image.onload you need to load the image in onload event handler. After load complete it will draw in canvas.

 function canvasDraw() { var file = $("#imageSelect").prop("files")[0]; //画像ファイルかチェックif (file["type"] != "image/jpeg" && file["type"] != "image/png" && file["type"] != "image/gif") { alert("画像ファイルを選択してください"); $("#imageSelect").val(''); //選択したファイルをクリア} else { var fr = new FileReader(); fr.onload = function() { //選択した画像を一旦imgタグに表示$("#preview").attr('src', fr.result); //imgタグに表示した画像をimageオブジェクトとして取得var image = new Image(); image.src = $("#preview").attr('src'); image.onload = function() { //縦横比を維持した縮小サイズを取得var w = 800; var ratio = w / image.width; var h = image.height * ratio; //canvasに描画var canvas = $("#canvas"); var ctx = canvas[0].getContext('2d'); $("#canvas").attr("width", w); $("#canvas").attr("height", h); ctx.drawImage(image, 0, 0, w, h); } }; fr.readAsDataURL(file); } }  function canvasDraw() { var file = $("#imageSelect").prop("files")[0]; //画像ファイルかチェックif (file["type"] != "image/jpeg" && file["type"] != "image/png" && file["type"] != "image/gif") { alert("画像ファイルを選択してください"); $("#imageSelect").val(''); //選択したファイルをクリア} else { var fr = new FileReader(); fr.onload = function() { //選択した画像を一旦imgタグに表示$("#preview").attr('src', fr.result); //imgタグに表示した画像をimageオブジェクトとして取得var image = new Image(); image.src = $("#preview").attr('src'); image.onload = function() { //縦横比を維持した縮小サイズを取得var w = 800; var ratio = w / image.width; var h = image.height * ratio; //canvasに描画var canvas = $("#canvas"); var ctx = canvas[0].getContext('2d'); $("#canvas").attr("width", w); $("#canvas").attr("height", h); ctx.drawImage(image, 0, 0, w, h); } }; fr.readAsDataURL(file); } }  function canvasDraw() { var file = $("#imageSelect").prop("files")[0]; //画像ファイルかチェックif (file["type"] != "image/jpeg" && file["type"] != "image/png" && file["type"] != "image/gif") { alert("画像ファイルを選択してください"); $("#imageSelect").val(''); //選択したファイルをクリア} else { var fr = new FileReader(); fr.onload = function() { //選択した画像を一旦imgタグに表示$("#preview").attr('src', fr.result); //imgタグに表示した画像をimageオブジェクトとして取得var image = new Image(); image.src = $("#preview").attr('src'); image.onload = function() { //縦横比を維持した縮小サイズを取得var w = 800; var ratio = w / image.width; var h = image.height * ratio; //canvasに描画var canvas = $("#canvas"); var ctx = canvas[0].getContext('2d'); $("#canvas").attr("width", w); $("#canvas").attr("height", h); ctx.drawImage(image, 0, 0, w, h); } }; fr.readAsDataURL(file); } }  function canvasDraw() { var file = $("#imageSelect").prop("files")[0]; //画像ファイルかチェックif (file["type"] != "image/jpeg" && file["type"] != "image/png" && file["type"] != "image/gif") { alert("画像ファイルを選択してください"); $("#imageSelect").val(''); //選択したファイルをクリア} else { var fr = new FileReader(); fr.onload = function() { //選択した画像を一旦imgタグに表示$("#preview").attr('src', fr.result); //imgタグに表示した画像をimageオブジェクトとして取得var image = new Image(); image.src = $("#preview").attr('src'); image.onload = function() { //縦横比を維持した縮小サイズを取得var w = 800; var ratio = w / image.width; var h = image.height * ratio; //canvasに描画var canvas = $("#canvas"); var ctx = canvas[0].getContext('2d'); $("#canvas").attr("width", w); $("#canvas").attr("height", h); ctx.drawImage(image, 0, 0, w, h); } }; fr.readAsDataURL(file); } }  function canvasDraw() { var file = $("#imageSelect").prop("files")[0]; //画像ファイルかチェックif (file["type"] != "image/jpeg" && file["type"] != "image/png" && file["type"] != "image/gif") { alert("画像ファイルを選択してください"); $("#imageSelect").val(''); //選択したファイルをクリア} else { var fr = new FileReader(); fr.onload = function() { //選択した画像を一旦imgタグに表示$("#preview").attr('src', fr.result); //imgタグに表示した画像をimageオブジェクトとして取得var image = new Image(); image.src = $("#preview").attr('src'); image.onload = function() { //縦横比を維持した縮小サイズを取得var w = 800; var ratio = w / image.width; var h = image.height * ratio; //canvasに描画var canvas = $("#canvas"); var ctx = canvas[0].getContext('2d'); $("#canvas").attr("width", w); $("#canvas").attr("height", h); ctx.drawImage(image, 0, 0, w, h); } }; fr.readAsDataURL(file); } }  function canvasDraw() { var file = $("#imageSelect").prop("files")[0]; //画像ファイルかチェックif (file["type"] != "image/jpeg" && file["type"] != "image/png" && file["type"] != "image/gif") { alert("画像ファイルを選択してください"); $("#imageSelect").val(''); //選択したファイルをクリア} else { var fr = new FileReader(); fr.onload = function() { //選択した画像を一旦imgタグに表示$("#preview").attr('src', fr.result); //imgタグに表示した画像をimageオブジェクトとして取得var image = new Image(); image.src = $("#preview").attr('src'); image.onload = function() { //縦横比を維持した縮小サイズを取得var w = 800; var ratio = w / image.width; var h = image.height * ratio; //canvasに描画var canvas = $("#canvas"); var ctx = canvas[0].getContext('2d'); $("#canvas").attr("width", w); $("#canvas").attr("height", h); ctx.drawImage(image, 0, 0, w, h); } }; fr.readAsDataURL(file); } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="file" name="picture" class='picture' accept="image/*" size="30" id="imageSelect" onChange="canvasDraw();" > <img src="" id="preview" /> <canvas id="canvas"></canvas>