jQuery Image Cropper, a Fully Configurable Image Cropping SDK
Add image cropping to your jQuery project in minutes with Pintura.
Intuitive to use on mobile and desktop. Supports cropping, rotating, turning, flipping, adding crop guides, and much more...
Get started
Try it here!
This is a small subset of the available configuration options.
To learn more read the documentation, or ask any questions here.
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.
Ready to meet all your project requirements
Everything you need in one packagePintura for jQuery packs everything your users need to crop images, and more. Powered by web technology it can be easily integrated in your jQuery 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 jQuery project
one npm install awayjQuery Image Cropper is powered by Pintura. It includes everything you need in your project to crop images.
Integrate Pintura in your jQuery project using your favorite package manager.
npm install @pqina/jquery-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 jQuery example project as a reference.
Test with image editor demo on Stackblitz.
Alternatively download Pintura as a zip.
-
index.html
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.
Save countless development hours
Get stuck? No worries. Contact support, we're always happy to help out.
About PQINA
Hey I'm Rik! I build highly polished web components at PQINA, my web components help 11,778 companies worldwide to build websites faster.
Over 500 customers rate my services an average of 4.9 out of 5
Pintura demonstrates that the web can rival the native app experience, it just needs an extra bit of attention.