javascript - 绘制图像在 Canvas 上不起作用

Question

我想使用canvas来压缩用户上传的图像文件。

我的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>

但是在 Canvas 中，没有显示图像。 image.width 和 image.height 不起作用。并且 ctx.drawImage(image, 0, 0, w, h) 不起作用。 你能告诉我为什么我会遇到这个问题吗？

Answer 1

image.onload您需要在 onload 事件处理程序中加载图像。加载完成后，它将在 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);
  }
}

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