Vue Image Editor, a Fully Configurable Image Editor SDK
Easily add an image editor to your Vue project with Pintura.
Intuitive on mobile and desktop. Crop, rotate, resize, filter, annotate, redact, adjust colors, 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 Vue packs everything your users need to edit images. Powered by web technology it can easily be integrated in your Vue 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
- Add annotations to images
- Store editor state to resume editing at a later time
- Rotate, z-order, flip, and duplicate shapes
- Enter multiline text and align to left, center, or right
- Create text boxes, text lines, and auto height text shapes
- Automatically apply watermarks
- Apply styles with CSS Custom Properties
- Use custom fonts, set custom shape colors, and dropdown options
- Set predefined shapes and control shape editing rules
- Switch between bright and dark theme with two CSS Custom Properties
- Control image brightness, contrast, exposure, saturation, clarity, and gamma.
- Apply a dark or bright vignette
- Render different frame styles around images
- Set a target output image size
- Manualy resizing of images
- 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
- Set different arrow start and end styles
- Preserve transparency when editing and saving PNGs
- Easily integrate with third party file upload libraries
- Enable or disable aspect ratio dropdown
- Customize crop aspect ratio dropdown options
- Add stickers to editor with drag drop
- Makes optimal use of different viewport sizes
- Supports tree shaking for minimal bundle sizes
- Great selection of default image filters
- Tested successfully on fast and slow devices
How to add the Image Editor to your Vue project
it only takes one npm installVue Image Editor is powered by Pintura and includes everything you need in your project to edit images.
Integrate Pintura in your Vue project using your favorite package manager.
npm install @pqina/vue-pintura @pqina/pintura
Use this Vue example project as a reference.
Alternatively download Pintura as a zip.
- App.vue
I spent weeks writing my own editor and it still sucked and was buggy. Was blown away at how easy it was to integrate Pintura Image Editor into our existing app! Within 2 hours I was done.
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,890 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.