如何显示带有裁剪网格的图像预览以使用户将图像拖动到固定大小

Question

我正在使用React-Dropzone，目前正在使用React-Easy-Crop尝试将图像限制为特定大小。我需要向用户展示一种在图像预览中将图像裁剪为特定高度和宽度的方法。

<div
    className="form-group"
    style={{ marginBottom: "10px" }}
>
    <Dropzone
    style={{ width: "460px" }}
    data-cy="drag-and-drop"
    accept="image/*"
    onDrop={acceptedFiles => {
        const imageErrors = [];

        // do nothing if no files
        if (acceptedFiles.length === 0) return;

        console.log("acceptedFiles", acceptedFiles);

        async function loadEdit(img) {
        if (img.width < 1440 || img.height < 360) {
            imageErrors.push(
            "This image must have a minimum Width of 1440px and a minimum Height of 360px"
            );
        }

        console.log({
            width: img.width,
            height: img.height
        });

        if (imageErrors.length > 0) {
            alert(imageErrors.join(", "));
        }
        }

        const img = new Image();
        img.addEventListener(
        "load",
        () =>
            loadEdit(img).then(() => {
            if (imageErrors.length > 0) {
                console.log("errors found");
                return;
            }

            // Automatically set Status field
            setFieldValue("statusselect", {
                label: "Active",
                value: 1
            });

            values.attachments = [];

            setFieldValue(
                "attachments",
                values.attachments.concat(acceptedFiles)
            );
            }),
        false
        );

        img.src = acceptedFiles[0].preview;
    }}
    >
    {({ isDragActive, isDragReject }) => {
        if (isDragActive) {
        return "This file is authorized";
        }

        if (isDragReject) {
        return "This file is not authorized";
        }

        if (values.attachments.length === 0) {
        return (
            <div style={overlayStyle}>
            click or drag Files here to upload.
            </div>
        );
        }

        return values.attachments.map(file => (
        <img src={file.preview} alt="file" style={{ width: "1440px", height: "330px"}} />
        ));
    }}
    </Dropzone>
    <span>* Minimum Image size required: 1440x360px</span>
</div>

在图像标签中，如何将图像设置为特定大小，即使图像被限制为不小于1440px x 360px？我试图设置宽度和高度，但这是行不通的。我还需要添加诸如react-easy-crop之类的叠加层或使用它。

任何想法都会对我有所帮助。谢谢。