Javascript 使用CSS以原始分辨率而不是更改的分辨率裁剪图像

使用

max width:100%更改上传和显示的图像的宽度但不修剪原始图像。
我尝试更改图像宽度时，图像宽度会随容器宽度自动调整，但react image crop crosshair不会进行调整，它会根据以前的分辨率对图像进行裁剪。
在我附加的图像中，您可以看到裁剪部分的图像不会出现在裁剪的预览中。它显示的是原始分辨率的裁剪预览


从“React”导入React；
从“反应图像裁剪”导入反应裁剪；
从“antd”导入{Button}；
导入“/custom crop.scss”；
进口{
image64toCanvasRef，
extractImageFileExtensionFromBase64，
base64StringtoFile，
下载Base64文件
}来自“/reusableUtils”；
类ImageUploader扩展了React.Component{
建造师（道具）{
超级（道具）；
this.imagePreviewCanvasRef=React.createRef（）；
此.state={
isVerified:false，
imgSrc:null，
imgSrcExt:null，
作物：{
方面:1/1,，
单位：“px”，//默认值，可以是“px”或“%”
x:130，
y:50，
宽度：200，
身高：200
}
};
}
onChange（e）{
设currFile=e[0]；
让fileReader=newFileReader（）；
fileReader.addEventListener(
“加载”，
() => {
这是我的国家({
imgSrc:fileReader.result
});
},
假的
);
fileReader.readAsDataURL（currFile）；
}
handleOnCropChange=裁剪=>{
this.setState（{crop:crop}）；
};
handleImageLoaded=（）=>{
//console.log（图像）；
};
handleOnCropComplete=裁剪=>{
//console.log（裁剪、像素裁剪）
const canvasRef=this.imagePreviewCanvasRef.current；
const{imgSrc}=this.state；
//const imageData64=canvasRef.toDataURL（“image/”+fileExtension）；
const fileExtension=extractImageFileExtensionFromBase64（imgSrc）；
const fileName=“profile_pic.”+文件扩展名；
const myNewCrop=base64StringtoFile（imgSrc，文件名）；
this.setState（{imgSrcExt:myNewCrop}）；
image64toCanvasRef（canvasRef、imgSrc、crop）；
};
handleDownloadClick=事件=>{
event.preventDefault（）；
const canvasRef=this.imagePreviewCanvasRef.current；
const{imgSrc}=this.state；
const imageData64=canvasRef.toDataURL（“image/”+fileExtension）；
const fileExtension=extractImageFileExtensionFromBase64（imgSrc）；
const fileName=“profile_pic.”+文件扩展名；
const myNewCrop=base64StringtoFile（imgSrc，文件名）；
this.setState（{imgSrcExt:myNewCrop}）；
//下载文件
下载Base64文件（imageData64，文件名）；
};
handleUpload=事件=>{
event.preventDefault（）；
//const canvasRef=this.imagePreviewCanvasRef.current；
//log（“数据：，this.state.imgSrcExt”）；
};
render（）{
设{imgSrc}=this.state；
返回(
this.onChange（e.target.files）}
样式={{marginBottom:“20px”}
/>
{imgSrc！=null(




下载
上传
) : (
)}
);
}
}
导出默认图像上传器