JavaScript Image Cropping With Pintura

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);
})