App.jsx
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 |
// Easy Image Cropping in React with react-easy-crop: Step-by-Step Guide import React, { useState } from "react"; import Cropper from "react-easy-crop"; const ImageCropper = () => { const [image, setImage] = useState(null); // Selected image const [crop, setCrop] = useState({ x: 0, y: 0 }); // Crop position const [zoom, setZoom] = useState(1); // Zoom level const [croppedAreaPixels, setCroppedAreaPixels] = useState(null); // Cropped area const [croppedImage, setCroppedImage] = useState(null); // Cropped image preview // Handle image selection const onImageChange = (e) => { if (e.target.files && e.target.files[0]) { const file = e.target.files[0]; const reader = new FileReader(); reader.onload = () => setImage(reader.result); reader.readAsDataURL(file); } }; // Handle crop complete const onCropComplete = (croppedArea, croppedAreaPixels) => { setCroppedAreaPixels(croppedAreaPixels); }; // Generate cropped image const showCroppedImage = async () => { if (!image || !croppedAreaPixels) return; const croppedImg = await getCroppedImg(image, croppedAreaPixels); setCroppedImage(croppedImg); }; // Utility function to crop the image const getCroppedImg = (imageSrc, crop) => { return new Promise((resolve, reject) => { const image = new Image(); image.src = imageSrc; image.onload = () => { const canvas = document.createElement("canvas"); canvas.width = crop.width; canvas.height = crop.height; const ctx = canvas.getContext("2d"); ctx.drawImage( image, crop.x, crop.y, crop.width, crop.height, 0, 0, crop.width, crop.height ); resolve(canvas.toDataURL("image/png")); // Return cropped image as a Data URL }; image.onerror = (error) => reject(error); }); }; // Download cropped image const downloadImage = () => { const link = document.createElement("a"); link.href = croppedImage; link.download = "cropped-image.png"; link.click(); }; return ( <div> <h1>React Easy Cropper Example</h1> <input type="file" accept="image/*" onChange={onImageChange} /> {image && ( <div style={{ position: "relative", width: "100%", height: "400px" }}> <Cropper image={image} crop={crop} zoom={zoom} onCropChange={setCrop} onZoomChange={setZoom} onCropComplete={onCropComplete} /> </div> )} <button onClick={showCroppedImage}>Crop</button> {croppedImage && ( <div> <h3>Cropped Image Preview:</h3> <img src={croppedImage} alt="Cropped" style={{ maxWidth: "100%" }} /> <button onClick={downloadImage}>Download Cropped Image</button> </div> )} </div> ); }; export default ImageCropper; |
