javascript - ReactCrop preview not rendering - Stack Overflow

admin管理员组

文章数量:1356515

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

Share Improve this question Follow asked Jun 17, 2022 at 8:09 CSS-RomeoCSS-Romeo 36222 silver badges1212 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 10

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]

本文标签： javascriptReactCrop preview not renderingStack Overflow