I wanted to implement an image cropping feature for my web application and came to know that react-image-crop is the best npm package to implement the same. But, for some reason, the preview that the ReactCrop ponent provides is not getting rendered on my viewport.

Here's the code that I've been using for it.

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;

I wanted to implement an image cropping feature for my web application and came to know that react-image-crop is the best npm package to implement the same. But, for some reason, the preview that the ReactCrop ponent provides is not getting rendered on my viewport.

Here's the code that I've been using for it.

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;

• javascript
• reactjs
• react-image-crop

2 Answers 2

There was nothing wrong with the code that I was using. I was able to solve this issue by downgrading the react-image-crop dependency to "^8.6.12". It seems that there is an issue with the latest release of the npm package.

Here's the mand to install the package with a specific version: npm i [email protected]

To add onto CSS-Romeo answer.

Run the following mand to uninstall the current version of react-image-crop:

npm uninstall react-image-crop

Now, install the desired version (8.6.12) using the following mand:

npm install [email protected]