ReactCrop预览未呈现

Question

我想为我的web应用程序实现一个图像裁剪功能，并逐渐认识到，反作用-图像裁剪是实现同样功能的最佳npm包。但是，由于某种原因，ReactCrop组件提供的预览没有呈现在我的视图端口上。

这是我一直在使用的代码。

import { useState } from 'react';
import ReactCrop from 'react-image-crop';
import 'react-image-crop/dist/ReactCrop.css';

function App() {
const [src, setSrc] = useState(null);
const [crop, setCrop] = useState({ aspect: 16 / 9 });
const [image, setImage] = useState(null);
const [output, setOutput] = useState(null);

const selectImage = (file) => {
    setSrc(URL.createObjectURL(file));
};

const cropImageNow = () => {
    const canvas = document.createElement('canvas');
    const scaleX = image.naturalWidth / image.width;
    const scaleY = image.naturalHeight / image.height;
    canvas.width = crop.width;
    canvas.height = crop.height;
    const ctx = canvas.getContext('2d');

    const pixelRatio = window.devicePixelRatio;
    canvas.width = crop.width * pixelRatio;
    canvas.height = crop.height * pixelRatio;
    ctx.setTransform(pixelRatio, 0, 0, pixelRatio, 0, 0);
    ctx.imageSmoothingQuality = 'high';

    ctx.drawImage(
    image,
    crop.x * scaleX,
    crop.y * scaleY,
    crop.width * scaleX,
    crop.height * scaleY,
    0,
    0,
    crop.width,
    crop.height,
    );
    
    // Converting to base64
    const base64Image = canvas.toDataURL('image/jpeg');
    setOutput(base64Image);
};

return (
    <div>
    <div>
        <input
        type="file"
        accept="image/*"
        onChange={(e) => {
            selectImage(e.target.files[0]);
        }}
        />
        <br />
        <br />
        <div>
        {src && (
            <div>
            <ReactCrop src={src} onImageLoaded={setImage}
                crop={crop} onChange={setCrop} />
            <br />
            <button onClick={cropImageNow}>Crop</button>
            <br />
            <br />
            </div>
        )}
        </div>
        <div>{output && <img src={output} />}</div>
    </div>
    </div>
);
}

export default App;

Answer 1

我使用的代码没有什么问题。我能够解决这个问题，降低了反应-图像-作物依赖性的"^8.6.12“。最近发布的国家预防机制一揽子计划似乎存在一个问题。