by PQINA

High-performance JavaScript Image Editing in the Browser

Fast implementation and great UX

The fastest and easiest way to add image editing capabilities to your SaaS, website, or web-based app.

Pintura Image Editor kills it in both user and developer experience. It's simple to get working and the UX is streets ahead of similar offerings. A brilliant library!

Integrates with your favourite stack

Pintura Image Editor is written in vanilla JavaScript and has zero dependencies. It ships with multiple adapter components to facilitate fast integration with popular frameworks like jQuery, React, Vue, Angular, and Svelte.

Intuitive interaction on each device

The editor layout automatically updates to best fit the available space. Pintura Image Editor ships with intuitive interaction patterns like multi-touch resizing and inertia dragging, it feels native on mobile, tablet, and desktop.

Overlay crop guides

Visually indicate how to make the perfect crop. Whether it's rendering a circular overlay to indicate profile picture bounds, or indicating print bleed margins, the shape API has got you covered.

Lock crop aspect ratio

Be sure customer images always conform to your requirements and fit perfectly by defining a fixed aspect ratio or by supplying a list of preset aspect ratios.

Use without UI

Don't need a user interface? Pintura Image Editor can run in headless mode. Import the processImage method and you can use the full Pintura Image Editor SDK programatically.

Freely rotate, flip, and scale images

Rotate, resize and flip pictures to make the perfect crop. Scale images using the mouse wheel, touch-pad, or mobile multi-touch input.

Powerful annotation tools

Draw rectangles, circles, lines, arrows, and text. Rotate, resize, duplicate and z-order annotations. Freedraw with a sharpie. Control which tools are available, which colors and fonts can be choosen from, and much more.

Force crop inside the image bounds

Pintura Image Editor will automatically adjust zoom and position while rotating and scaling to make sure the crop is inside the bounds of the input image. Of course this can be disabled just like any other feature.

Beautiful preset filters

Choose from a growing set of carefully crafted filters. Extend the default filters with your own filters and the Pintura Image Editor interface will update automatically.

Powerful color controls

Adjust brightness, contrast, exposure, saturation, clarity, and gamma. Need more control, extend the default finetune controls with your own.

Generate images in the browser

No server dependency means your customers privacy is guaranteed. Get faster and more stable image uploads plus lower server bandwidth usage by compressing, resizing, and converting images in the browser.

Art direction with shape templates

The Markup Shape API enables programmatic control over how shapes can be manipulated. Lock shapes in place, prevent changing the style of a shape, or only allow updating the text.

Picture caption

Live image preview

Render on top of an image to show a live preview of the result. Ideal for editing a profile page header or landing page hero images.

Give live preview mode a try below!

Loading editor...

Feature overview

  • Enforce crop aspect ratio

    Enforce a single crop aspect ratio or offer a range of aspect ratio options to make sure uploaded images are always perfect.

  • Fast image uploads

    Boost file upload speed and lower server bandwidth usage by compressing, resizing, and converting images in the browser.

  • Rotate, resize and flip

    Make the pixel perfect crop each time. Scale images using the zoom control, mouse wheel, touchpad, or intuitive multi-touch interaction.

  • Overlay crop guides

    Help your customers upload better images. Show an overlay on top of the editor to illustrate bleed margins or profile picture boundaries.

  • Photo filter effects

    Apply a set of carefully crafted filter effects to your photos. Extend with your own filters and the Pintura Image Editor UI will update automatically.

  • 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
  • Rotate, z-order, flip, and duplicate shapes
  • Enter multiline text and align to left, center, or right
  • Automatically apply watermarks
  • Apply styles with CSS Custom Properties
  • Define custom values for shape colors, fonts, and style dropdowns
  • 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
  • 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

Implementation examples

  • Add watermark

    Use the postProcessImageData hook to add a watermark to the imageData before the output file is created.

  • Blank canvas

    Use a blank canvas element as src to load a new blank image.

  • Circular crop overlay

    Use the willRenderCanvas property to adjust the preview image the editor renders.

  • Compress image

    Use the quality property on the createDefaultImageWriter function to lower the image output quality.

  • Crop square image

    Use the imageCropAspectRatio property to instruct the editor to make a crop in a fixed aspect ratio.

  • Download image

    Use the URL.createObjectURL Web API to turn the editor file output into a URL and download it to the local file system.

  • Generate image

    Use the processImage property function to generate an image without showing or loading the user interface.

  • Image preview

    Use the URL.createObjectURL Web API to turn the editor file output into an image URL ready to set to an image element.

  • Image upload

    Use the store property to automatically upload output images to a server.

  • Load HEIC image

    Use the postProcessImageData property to add a watermark to the imageData before the output file is created.

  • Apply circular mask

    Use the postProcessImageData property to mask the imageData before the output file is created.

  • Text placeholders

    Use the preprocessImageState hook to automatically replace placeholder values in text shapes.

  • Resize image

    Use the targetSize property on the createDefaultImageWriter function to automatically resize images.

  • Use custom fonts

    Ue the createMarkupEditorShapeStyleControls function to create custom shape style controls.

Ready to get started?

If you find Pintura Image Editor is not a great fit for you project, contact us within 60 days and we'll refund you in full, no questions asked.

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