{"library":"react-easy-crop","title":"React Easy Crop","description":"react-easy-crop is a React component designed for cropping images and videos with intuitive drag, zoom, and rotate interactions. It provides precise crop dimensions in both pixels and percentages, supporting various image formats (JPEG, PNG, GIF) via URL or base64 strings, as well as HTML5-supported video formats. The library is currently stable at version 5.5.7 and maintains a regular release cadence, primarily focusing on bug fixes and minor enhancements, as seen in recent patch releases. Key differentiators include its mobile-friendly design and its comprehensive feature set for media manipulation within a React application, offering a simpler alternative to more extensive image editing suites like Pintura while still providing essential cropping functionalities.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install react-easy-crop"],"cli":null},"imports":["import Cropper from 'react-easy-crop'","const Cropper = require('react-easy-crop')","import type { Area, Point } from 'react-easy-crop'"],"auth":{"required":false,"env_vars":[]},"quickstart":{"code":"import { useState, useCallback } from 'react';\nimport Cropper from 'react-easy-crop';\n\n// A helper function commonly used with react-easy-crop, but not exported by it\nconst createImage = (url) =>\n  new Promise((resolve, reject) => {\n    const image = new Image();\n    image.addEventListener('load', () => resolve(image));\n    image.addEventListener('error', (error) => reject(error));\n    image.setAttribute('crossOrigin', 'anonymous'); // Needed to avoid cross-origin issues for canvas operations\n    image.src = url;\n  });\n\nasync function getCroppedImage(imageSrc, pixelCrop) {\n  const image = await createImage(imageSrc);\n  const canvas = document.createElement('canvas');\n  const ctx = canvas.getContext('2d');\n\n  if (!ctx) {\n    throw new Error('2D context not supported');\n  }\n\n  const { width, height, x, y } = pixelCrop;\n\n  canvas.width = width;\n  canvas.height = height;\n\n  ctx.drawImage(\n    image,\n    x,\n    y,\n    width,\n    height,\n    0,\n    0,\n    width,\n    height\n  );\n\n  return new Promise((resolve) => {\n    canvas.toBlob((blob) => {\n      if (!blob) {\n        console.error('Canvas toBlob returned null');\n        return;\n      }\n      resolve(URL.createObjectURL(blob));\n    }, 'image/jpeg');\n  });\n}\n\nconst Demo = () => {\n  const [imageSrc, setImageSrc] = useState('https://via.placeholder.com/600x400.png?text=Upload+Image');\n  const [crop, setCrop] = useState({ x: 0, y: 0 });\n  const [zoom, setZoom] = useState(1);\n  const [croppedAreaPixels, setCroppedAreaPixels] = useState(null);\n  const [croppedImage, setCroppedImage] = useState(null);\n\n  const onCropComplete = useCallback((_croppedArea, _croppedAreaPixels) => {\n    setCroppedAreaPixels(_croppedAreaPixels);\n  }, []);\n\n  const showCroppedImage = useCallback(async () => {\n    try {\n      if (imageSrc && croppedAreaPixels) {\n        const croppedImageUrl = await getCroppedImage(imageSrc, croppedAreaPixels);\n        setCroppedImage(croppedImageUrl);\n        console.log('Cropped Image URL:', croppedImageUrl);\n      }\n    } catch (e) {\n      console.error('Error cropping image:', e);\n    }\n  }, [imageSrc, croppedAreaPixels]);\n\n  return (\n    <div>\n      <div style={{ position: 'relative', width: '100%', height: 400, background: '#f0f0f0' }}>\n        <Cropper\n          image={imageSrc}\n          crop={crop}\n          zoom={zoom}\n          aspect={4 / 3}\n          onCropChange={setCrop}\n          onCropComplete={onCropComplete}\n          onZoomChange={setZoom}\n        />\n      </div>\n      <button onClick={showCroppedImage} style={{ marginTop: 20 }}>\n        Show Cropped Image\n      </button>\n      {croppedImage && (\n        <div style={{ marginTop: 20 }}>\n          <h3>Result</h3>\n          <img src={croppedImage} alt=\"Cropped\" style={{ maxWidth: '100%', height: 'auto' }} />\n        </div>\n      )}\n    </div>\n  );\n};\n\nexport default Demo;","lang":"typescript","description":"Demonstrates basic image cropping using a placeholder image, allowing drag and zoom, and then programmatically extracting the cropped portion as a new image blob. It includes a common utility function `getCroppedImage` (not part of the library) to process the raw crop coordinates into a usable image.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}