javascript 当我选择第一张照片时,我不能输入onload,但是我的代码可以用于第二张照片,我该如何解决这个问题?

nzk0hqpo  于 2023-02-07  发布在  Java
关注(0)|答案(1)|浏览(133)

我想用JavaScript在我的file input元素的onchange事件中获取照片,用canvas编辑,但是照片在第二次选择时是在onload中处理的,第一次选择的照片没有进入onload事件,提前感谢您的帮助

function addTeam_photo() {
  const input = document.querySelector("#fileSelect");
  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("2d");
  console.log(input.files[0])
  console.log(window.URL.createObjectURL(input.files[0]))
  document.getElementById("imgresimguncelle").src=window.URL.createObjectURL(input.files[0]);
  input.addEventListener("change", (event) => {
    const image = new Image();
    // console.log(event.target.files[0]);
    image.src = document.getElementById("imgresimguncelle").src;
    image.onload = () => {
      console.log("onload");
      canvas.width = 1000;
      canvas.height = 1000;
      ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
      const dataURL = canvas.toDataURL();
      console.log(dataURL);
      var fd = new FormData();
      fd.append("photo", dataURL);
      console.log(fd);
      $.ajax({
        url: "islemler/function.php?islem=addTeam_photo",
        type: "POST",
        enctype: "multipart/form-data",
        processData: false,
        contentType: false,
        cache: false,
        data: fd,
        success: function (result) {
          if ($.trim(result) == "ok") {
            alert("ok");
          }
        },
      });
    };
  });
}

当我选择第一张照片时,它没有输入onload,但是当我选择第二张照片时,代码就可以工作了

06odsfpq

06odsfpq1#

你应该在设置任何图像源之前设置onchange事件处理器,可能发生的情况是你的第一张图像在你设置change事件处理器之前就已经完全加载了。

function addTeam_photo() {
  const input = document.querySelector("#fileSelect");
  const canvas = document.createElement("canvas");
  const ctx = canvas.getContext("2d");
  console.log(input.files[0])
  console.log(window.URL.createObjectURL(input.files[0]))
  document.getElementById("imgresimguncelle").src=window.URL.createObjectURL(input.files[0]);
  input.addEventListener("change", (event) => {
    const image = new Image();
    // console.log(event.target.files[0]);
    // Set up the load event before setting the image source
    // And use .addEventListener instead of .onchange
    image.addEventListener("change", () => {
      console.log("onload");
      canvas.width = 1000;
      canvas.height = 1000;
      ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
      const dataURL = canvas.toDataURL();
      console.log(dataURL);
      var fd = new FormData();
      fd.append("photo", dataURL);
      console.log(fd);
      $.ajax({
        url: "islemler/function.php?islem=addTeam_photo",
        type: "POST",
        enctype: "multipart/form-data",
        processData: false,
        contentType: false,
        cache: false,
        data: fd,
        success: function (result) {
          if ($.trim(result) == "ok") {
            alert("ok");
          }
        },
      });
    });
    // Now that there is a listener for the image load event,
    // start to load an image.
    image.src = document.getElementById("imgresimguncelle").src;
  });
}

相关问题