e.target.result仅在两次或三次尝试后工作

Question

我正在尝试在客户端调整图像大小，然后将其发送到我的服务器。但是图像并非总是正确定位到用于调整图像大小的画布上。

我已经发送了图像调整大小，但我需要至少发送 2 次才能工作。我在html中放置了<p>标签来验证图像的数据，并且在第一次发送时可以看到数据不完整。

这是我的网页

function ResizeImage() {
  var filesToUpload = document.getElementById('imageFile').files;
  var file = filesToUpload[0];
  console.log('Data');
  // Create an image
  var img = document.createElement("img");
  // Create a file reader
  var reader = new FileReader();
  // Set the image once loaded into file reader
  reader.onload = function(e) {
    //HERE IN THIS PART, the e.target.result works strange
    img.src = e.target.result;
    var canvas = document.createElement("canvas");
    //var canvas = $("<canvas>", {"id":"testing"})[0];
    var ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0);
    // var MAX_WIDTH = 400;
    // var MAX_HEIGHT = 400;
    var width = 200;
    var height = 200;
    if (img.width > img.height) {
      if (img.width > width) {
        height *= height / img.width;
        //width = width;
      }
    } else {
      if (img.height > height) {
        width *= height / img.height;
        //height = height;
      }
    }
    canvas.width = width;
    canvas.height = height;
    ctx = canvas.getContext("2d");
    ctx.drawImage(img, 0, 0, width, height);
    var dataurl = canvas.toDataURL("image/png");
    console.log(dataurl);
    canvas.toBlob((blob) => {
      var fd = new FormData();
      fd.append("name", "paul");
      fd.append("image", blob);
      fd.append("key", "××××××××××××");
      var xhr = new XMLHttpRequest();
      xhr.open("POST", "http://localhost:5000/2");
      xhr.send(fd);
    }, "image/png", 1)
    document.getElementById('output').src = dataurl;
    var para = document.createElement("p");
    var node = document.createTextNode(dataurl);
    para.appendChild(node);
    var element = document.getElementById("contenedor");
    element.appendChild(para);
  }
  // Load files into file reader
  reader.readAsDataURL(file);
}

<input type="text" name="fileName">
<input type="file" id="imageFile" name="sampleFile" accept="image/png" />
<input type='button' value='Upload!' onclick="ResizeImage()" />
<img src="" id="output">
<div id="contenedor"></div>
<hr>

我希望它在我第一次将数据发送到服务器时有效。

Answer 1

Img.src 是异步的。

要验证这一点，请将"img.src = e.target.result;"替换为

img.onload = function () { console.log('done')} 
img.src = e.target.result;
console.log('src')

如果在 src 之后运行 done，则当您尝试 ctx.drawImage 时，您知道图像尚未加载。

要修复，只需将所有调整大小的代码移动到img.onload中即可。