我想用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,但是当我选择第二张照片时,代码就可以工作了
1条答案
按热度按时间06odsfpq1#
你应该在设置任何图像源之前设置
onchange
事件处理器,可能发生的情况是你的第一张图像在你设置change事件处理器之前就已经完全加载了。