react-easy-crop

import { useState, useCallback } from 'react'; import Cropper from 'react-easy-crop'; // A helper function commonly used with react-easy-crop, but not exported by it const createImage = (url) => new Promise((resolve, reject) => { const image = new Image(); image.addEventListener('load', () => resolve(image)); image.addEventListener('error', (error) => reject(error)); image.setAttribute('crossOrigin', 'anonymous'); // Needed to avoid cross-origin issues for canvas operations image.src = url; }); async function getCroppedImage(imageSrc, pixelCrop) { const image = await createImage(imageSrc); const canvas = document.createElement('canvas'); const ctx = canvas.getContext('2d'); if (!ctx) { throw new Error('2D context not supported'); } const { width, height, x, y } = pixelCrop; canvas.width = width; canvas.height = height; ctx.drawImage( image, x, y, width, height, 0, 0, width, height ); return new Promise((resolve) => { canvas.toBlob((blob) => { if (!blob) { console.error('Canvas toBlob returned null'); return; } resolve(URL.createObjectURL(blob)); }, 'image/jpeg'); }); } const Demo = () => { const [imageSrc, setImageSrc] = useState('https://via.placeholder.com/600x400.png?text=Upload+Image'); const [crop, setCrop] = useState({ x: 0, y: 0 }); const [zoom, setZoom] = useState(1); const [croppedAreaPixels, setCroppedAreaPixels] = useState(null); const [croppedImage, setCroppedImage] = useState(null); const onCropComplete = useCallback((_croppedArea, _croppedAreaPixels) => { setCroppedAreaPixels(_croppedAreaPixels); }, []); const showCroppedImage = useCallback(async () => { try { if (imageSrc && croppedAreaPixels) { const croppedImageUrl = await getCroppedImage(imageSrc, croppedAreaPixels); setCroppedImage(croppedImageUrl); console.log('Cropped Image URL:', croppedImageUrl); } } catch (e) { console.error('Error cropping image:', e); } }, [imageSrc, croppedAreaPixels]); return ( <div> <div style={{ position: 'relative', width: '100%', height: 400, background: '#f0f0f0' }}> <Cropper image={imageSrc} crop={crop} zoom={zoom} aspect={4 / 3} onCropChange={setCrop} onCropComplete={onCropComplete} onZoomChange={setZoom} /> </div> <button onClick={showCroppedImage} style={{ marginTop: 20 }}> Show Cropped Image </button> {croppedImage && ( <div style={{ marginTop: 20 }}> <h3>Result</h3> <img src={croppedImage} alt="Cropped" style={{ maxWidth: '100%', height: 'auto' }} /> </div> )} </div> ); }; export default Demo;