drawImage在畫布中不起作用

Question

我想使用畫布來壓縮用戶上傳的圖像文件。

我的js代碼在這里。

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>

但是在畫布中，沒有顯示圖像。 image.width和image.height不工作。 和ctx.drawImage(image, 0, 0, w, h)不起作用。 你能告訴我為什么會有這個問題嗎？

Answer 1

image.onload您需要在onload事件處理程序中加載圖像。 加載完成后，它將在畫布中繪制。

 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>