In my project, using react-image-crop package to crop images. But which provides some errors
import React, { useState } from 'react'
import ReactCrop from 'react-image-crop'
import 'react-image-crop/dist/ReactCrop.css'
export const Imagecrop = () => {
const [src, setSrc] = useState(null)
const handleFileChange = e =>{
console.log(e.target.files[0])
setSrc(URL.createObjectURL(e.target.files[0]))
console.log("src", src)
}
const [image, setImage] = useState(null)
const [crop, setCrop] = useState()
const [result, setResult] = useState(null);
const cropImageNow = () => {
console.log("image", image)
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');
setResult(base64Image);
};
return (
<div className='container'>
<div className='row'>
<div className='col-6'>
<input type='file' accept='image/*' onChange={handleFileChange} />
</div>
<div className='col-6'>
{src && (
<ReactCrop crop={crop} aspect={800 / 200} onChange={setCrop}>
<img src={src} />
</ReactCrop>
)}
{src && <button onClick={cropImageNow}>crop</button>}
</div>
{result && <div>
<img src={result} alt="croped image" className='img-fluid'/>
</div>}
</div>
</div>
)
}
The result is
when uncommenting these lines
ctx.drawImage(
image,
crop.x * scaleX,
crop.y * scaleY,
crop.width * scaleX,
crop.height * scaleY,
0,
0,
crop.width,
crop.height,
);
which produces an error
How to get the cropped image in the last column? Is there any possible way to use react-image-crop to show cropped images without using drawImage? Please give me a solution to fix this problem.
