Question

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

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

这是我的html

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之后运行，则当您尝试ctx.drawImage时，您知道该图像尚未加载。

要解决此问题，只需将所有调整大小的代码移至img.onload。

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

1 个答案: