React Image Cropper, Powered by Pintura SDK

Pintura Image Editor by PQINA

Pintura Image Editor is pretty sick! If you need any sort of image editor in your application, use Pintura for a 10,000 hour head start.

Wes Bos Full Stack JavaScript Developer

Ready to meet all your project requirements

Everything you need in one package

Pintura for React packs everything your users need to crop images, and more. Powered by web technology it can be easily integrated in your React project.

Fixed crop aspect ratio

Supports free cropping, setting a fixed aspect ratio, and showing a list of ratios to choose from. Crop aspect ratio can be dynamically updated at any time.
Extendable image support

Loads all file formats supported by the client browser: JPEG, PNG, GIF, WEBP, BMP, and SVG. Extend to load HEIC, PDF, or other formats when needed.
Supports various input methods

Is ready for all interaction methods, supports mouse wheel, keyboard, touchpad, and intuitive multi-touch interaction.
Overlay crop guides

Add any guide to the crop util to show where the user should crop. Used to illustrate bleed margins, indicate circular profile picture boundaries, or show specialised masks.
Useful helper components

Includes a Modal component, an Inline page component, and an Overlay component. Package also includes headless image manipulation for manipulating images on a server or away from the users view.
Responsive and accessible

Scales to best fit the available space. Interact with touch, mouse, and keyboard. Works great on mobile, tablet, and desktop.

Control language and icons in the user interface
Undo, redo, and reset actions
Toggle individual editor controls
Output binary image and/or editor state
Store editor state to resume editing at a later time
Automatically apply watermarks
Switch between bright and dark theme with two CSS Custom Properties
Set a target output image size
Automatically render in a modal
Render as overlay on top of an existing image
Render as inline editor right in the webpage
Load file objects, blobs, URLs, and dataURLs
Load canvas elements and image tags
Multi-touch interaction on mobile
Supports keyboard navigation
Load raster images like GIFs, PNGs, WEBPs, JPEGs and BMPs
Automatically corrects photo orientation
Copy JPEG EXIF data to output image
Transform input images to other image formats
Supports custom load logic to load HEIC or other image formats
Compress JPEG and WEBP images
Preserve transparency when editing and saving PNGs
Easily integrate with third party file upload libraries
Customize crop aspect ratio dropdown options
Makes optimal use of different viewport sizes
Supports tree shaking for minimal bundle sizes
Tested successfully on fast and slow devices

How to add Image Cropping to your React project

one npm install away

React Image Cropper is powered by Pintura. It includes everything you need in your project to crop images.

Integrate Pintura in your React project using your favorite package manager.

npm install @pqina/react-pintura @pqina/pintura

The Pintura module supports tree-shaking. Only import the image cropper util and the package is automatically optimized for your use case.

Use this React example project as a reference.

Test with image editor demo on Stackblitz.

Alternatively download Pintura as a zip.

App.jsx

We love working with Pintura - it has given us a shortcut to offering image cropping and stickers that would have been very difficult to implement ourselves.

Jamie Wilde CTO - Miro