by PQINA

JavaScript Image Cropping with Pintura

Publish date

JavaScript Image Cropping with Pintura is amazingly powerful and functions flawlessly on a broad range of mobile and desktop browsers. Let's explore some of the available image cropper options.

Give it a try below!
Image

This is a small subset of the available configuration options.

To learn more read the documentation, or ask any questions here.

  • JavaScript
  • Custom Elements
  • jQuery
  • React
  • Vue
  • Angular
  • Svelte
  • TypeScript
  • Electron
  • Cordova
  • Next.js
  • Nuxt.js
  • Tailwind CSS
  • Bootstrap
  • Foundation

Crop, rotate, zoom, and pan interactions

Drag the crop corners and edges to crop the image. Four crop guides help make the perfect image crop. The image crop can automatically be restricted to the image bounds.

Flip, freely rotate, or turn images in 90 degree steps. The editor automatically adjusts the image zoom to fit the image to the crop bounds.

While cropping zoom the image using the zoom control, the mousewheel, a trackpad, and when on a touch screen, multi-touch gestures.

Pan and flick the image using touch and mouse input. All interactions feel a 100% natural and native on desktop, tablet, and mobile.

Enforcing the image crop aspect ratio

Offer the user a list of crop aspect ratios to choose from…

editor.cropSelectPresetOptions = [
    [undefined, 'Custom'],
    [1, 'Square'],
    [1.5, 'Landscape'],
    [0.7, 'Portrait']
]

…or set a single fixed crop aspect ratio.

editor.imageCropAspectRatio = 1

Create new images in the browser

When we're done cropping the image we resize the resulting crop with JavaScript…

editor.imageWriter = createDefaultImageWriter({
    targetSize: {
        width: 512,
        height: 512
        fit: 'contain'
    }
});

…and show the output image on the webpage.

editor.on('process', ({ dest }) => {
    const result = new Image();
    result.src = URL.createObjectURL(dest);
    document.body.appendChild(result);
})

More than just image cropping…

Finetuning colors, annotating images, and adding stickers, get familiar with all of Pintura Image Editors capabilities on the product page.