Javascript drawImage在画布中不起作用

我想使用画布压缩用户上传的图像文件

我的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.drawImageimage，0，0，w，h不起作用。 您能告诉我为什么会出现这个问题吗？

您需要在onload事件处理程序中加载映像。加载完成后，它将在画布中绘制

功能拉票{ var file=$imageSelect.propfiles[0]； //画像ファイルかチェック 如果文件[type]！=image/jpeg&&file[type]！=image/png&&file[type]！=image/gif{ 警觉的画像ファイルを選択してください; $imageSelect.val//選択したファイルをクリア }否则{ var fr=新文件读取器； fr.onload=函数{ //選択した画像を一旦imgタグに表示 $preview.attr'src'，fr.result； //imgタグに表示した画像を形象オブジェクトとして取得 var图像=新图像 image.src=$preview.attr'src'； image.onload=函数{ //縦横比を維持した縮小サイズを取得 var w=800； var比率=w/图像宽度； var h=图像高度*比率； //帆布に描画 var canvas=$canvas； var ctx=canvas[0]。getContext'2d'； $canvas.attrwidth，w； $canvas.attr高度，h； ctx.drawImageimage，0，0，w，h； } }; fr.readAsDataURLfile； } }

---

你能删除中文注释并用一些伪字符串替换警告行，以便非中文使用者更容易阅读吗？对不起，我编辑了。