Javascript 如何调整图像输入的大小，以便使用新的宽度和高度生成新的src属性？

我在一个有角度的网站上工作，在一个图像选择器上（为了创建具有设置大小的缩略图）。 我使用一个文件输入让用户上传他的文件，然后我捕捉事件，做一些验证（格式和大小），然后我处理它的大小调整。但这目前根本不起作用

我实际上承诺将FileInput目标转换为base64图像，然后使用它创建一个image（）对象，以访问图像的宽度和高度

我正在更改img.width和img.height属性，并创建一个包含img.src的文件输入

由于我使用的是

ngx图像裁剪器

，我真的无法按照我的意愿去做，我真的需要在裁剪器中推送一个调整大小的图像。

（ngx图像裁剪器接受FileEvent或Base64 img url）

//继续调整图像大小
调整img（img）{
if（img.宽度和img.高度）{
如果（img.height>img.width&&img.height>280）{
常数系数=280/img.高度；
img.width=img.width*coef；
img.height=img.height*系数；
}否则如果（img.width>img.height&&img.width>280）{
常数系数=280/img.width；
img.height=img.height*系数；
img.width=img.width*coef；
}
}
控制台日志（img.宽度）；
控制台日志（img.高度）；
返回img；
}
//创建回文件输入
imageToFileInput（src、文件名、imgType）{
返回获取（src）
.然后（功能（res）{
return res.arrayBuffer（）；
})
.then（功能（buf）{
返回新文件（[buf]，文件名，{type:imgType}）；
});
}
//承诺使用文件的base64 url创建Image（）对象
createImg（url）{
返回新承诺（功能（res、rej）{
const img=新图像（）；
img.onload=函数（）{
res（img）；
};
img.src=url；
});
}
//承诺生成图像文件的base64 url
retrieveBase64Url（文件）{
返回新承诺（功能（res、rej）{
const reader=new FileReader（）；
reader.onload=函数（）{
res（reader.result）；
};
reader.readAsDataURL（文件）；
});
}
//管理格式/大小错误，然后将文件添加到裁剪器
fileProcess（fileInput:any）{
const file=fileInput.target.files[0]；
this.preview=false；
如果(
文件&&
file.type！=='image/png'&&
file.type！=='image/jpg'&&
file.type！=='image/jpeg'
) {
//格式错误手势
this.sizeError=false；
this.formatError=true；
}else if（file&&file.size/1000000>this.maxSize）{
//尺寸误差手势
this.formatError=false；
this.sizeError=true；
}否则{
this.fileName=file.name；
//处理图像大小调整，将其应用于文件，然后将其推送到裁剪器
这个.retrieveBase64Url（文件）。然后（url=>{
this.createImg（url）.then（img=>{
const resized_img=此。resizeImg（img）；
这个.imageToFileInput（resized_img.src，'resized.png'，'image/png'）。然后（result=>{
this.imageChangedEvent={target:{files:[result]}；
this.formatError=false；
this.sizeError=false；
});
});
});
}
}

---

我只想在插入裁剪器之前调整图像的大小，但现在，即使它经历了所有的调整大小过程，上传图像时，图像保持原样，高度和宽度不变。

简短问题：函数

resizeImg

中的数学运算正常，并且它记录了不同的

高度

和

宽度

值？不准确，例如，当我使用640x960px图像时，图像经过数学运算后，它的尺寸（image.width和image.height）是186x280px，这就是我想要的。但是问题是image.src仍然是640x960您是否尝试在画布上绘制图像，然后再次设置

img.src

？像

调整大小的\u img.src=canvas.toDataURL（）这里是我使用的：或者在这里我曾经尝试过，但我做错了。现在，我按照你的第二个链接，它的工作！谢谢！简短的问题：你的函数中的数学功能
resizeImg
工作正常，它记录了不同的
高度
和
宽度
值？不完全正确，例如，当我使用640x960px图像时，图像经过数学运算后，它的尺寸（image.width和image.height）是186x280px，这是我想要的。但是问题是image.src仍然是640x960您是否尝试在画布上绘制图像，然后再次设置
img.src
？像
调整大小的\u img.src=canvas.toDataURL（）这里是我使用的：或者在这里我曾经尝试过，但我做错了。现在，我按照你的第二个链接，它的工作！谢谢！