React Image Cropper Component

This challenge asks you to build a reusable React component that allows users to crop images. Image cropping is a common feature in many applications, enabling users to select a specific portion of an image before uploading or displaying it. This component will provide a visual interface for selecting a rectangular region within an image and retrieving the cropped image data.

Problem Description

You are tasked with creating a Cropper component in React using TypeScript. The component should accept an image URL as a prop and render a visual interface allowing the user to define a cropping region. The interface should include:

• Image Display: Display the image provided via the imageUrl prop.
• Cropping Area: A rectangular area overlaid on the image that represents the cropping selection. This area should be visually distinct (e.g., with a border).
• Drag and Resize Functionality: Allow the user to drag the cropping area to select different regions of the image. Also, allow the user to resize the cropping area by dragging its corners.
• Cropped Image Data: Provide a method (a function prop) to retrieve the cropped image data (e.g., a data URL or a canvas element) when the user clicks a "Crop" button.
• Initial Selection (Optional): Allow an optional initialSelection prop to define the initial cropping area (x, y, width, height).

Expected Behavior:

• The component should handle images of various sizes.
• The cropping area should remain within the bounds of the image.
• The component should be responsive and adapt to different screen sizes.
• The "Crop" button should trigger the provided callback function with the cropped image data.
• The component should gracefully handle invalid image URLs (e.g., display an error message).

Edge Cases to Consider:

• Empty or invalid imageUrl prop.
• initialSelection values that are out of bounds or invalid (negative values, zero width/height).
• Very large images that might impact performance.
• Images with different aspect ratios.

Examples

Example 1:

Input: imageUrl = "https://example.com/image.jpg", onCrop = (dataURL: string) => { console.log(dataURL); }
Output: A React component displaying the image, a draggable/resizable cropping area, and a "Crop" button. Clicking the "Crop" button logs the cropped image's data URL to the console.
Explanation: The component loads the image, renders the cropping interface, and allows the user to select a region.  Upon cropping, the cropped image data is passed to the `onCrop` function.

Example 2:

Input: imageUrl = "https://example.com/image.jpg", initialSelection = { x: 50, y: 50, width: 200, height: 150 }, onCrop = (canvas: HTMLCanvasElement) => { console.log(canvas); }
Output: A React component displaying the image with the cropping area initially positioned at x=50, y=50, width=200, height=150. Clicking the "Crop" button logs the cropped image's canvas element to the console.
Explanation: The component loads the image and initializes the cropping area to the specified coordinates and dimensions.

Example 3:

Input: imageUrl = "", onCrop = (dataURL: string) => { console.log(dataURL); }
Output: A React component displaying an error message indicating that the image URL is invalid.
Explanation: The component handles the case where no image URL is provided.

Constraints

• The component should be implemented using React and TypeScript.
• The component should be reasonably performant, even with moderately sized images (e.g., under 2MB). Avoid unnecessary re-renders.
• The onCrop callback function should receive either a data URL string or an HTMLCanvasElement representing the cropped image. The component should allow the user to specify which type of data is returned via a prop (e.g., returnDataAs: 'dataURL' | 'canvas'). Default to 'dataURL'.
• The component should not rely on external libraries for image manipulation (e.g., no Cropper.js). Basic canvas manipulation is acceptable.

Notes

• Consider using React's useState hook to manage the cropping area's position and size.
• You can use the HTML5 canvas element to perform the actual cropping operation.
• Think about how to handle edge cases where the user tries to drag the cropping area outside the image boundaries.
• Focus on creating a clean, reusable, and well-documented component.
• Error handling for invalid image URLs is important for a robust component.
• Consider using CSS for styling and layout. You don't need to create a visually stunning component, but it should be functional and easy to use.