v8.48.3

Crop square images by setting a fixed crop aspect ratio

We can use the imageCropAspectRatio property to instruct the editor to make a crop in a fixed aspect ratio.

<!DOCTYPE html>

<link rel="stylesheet" href="./pintura.css" />

<style>
    .pintura-editor {
        height: 600px;
    }
</style>

<div id="editor"></div>

<script type="module">
    import { appendDefaultEditor } from './pintura.js';

    const editor = appendDefaultEditor('#editor', {
        src: 'image.jpeg',

        // This will result in a square crop
        imageCropAspectRatio: 1,
    });
</script>

If we wanted to make a crop in a different aspect ratio, for example 16:9 we'd simply pass it to the imageCropAspectRatio property like this:

<!DOCTYPE html>

<link rel="stylesheet" href="./pintura.css" />

<style>
    .pintura-editor {
        height: 600px;
    }
</style>

<div id="editor"></div>

<script type="module">
    import { appendDefaultEditor } from './pintura.js';

    const editor = appendDefaultEditor('#editor', {
        src: 'image.jpeg',

        // This will result in a 16:9 crop
        imageCropAspectRatio: 16 / 9,
    });
</script>

If we wanted to offer the user different crop options we'd pass them like this, the editor will automatically select the current imageCropAspectRatio in the cropSelectPresetOptions dropdown.

<!DOCTYPE html>

<link rel="stylesheet" href="./pintura.css" />

<style>
    .pintura-editor {
        height: 600px;
    }
</style>

<div id="editor"></div>

<script type="module">
    import { appendDefaultEditor } from './pintura.js';

    const editor = appendDefaultEditor('#editor', {
        src: 'image.jpeg',

        // This will result in a 16:9 crop
        imageCropAspectRatio: 16 / 9,

        // Offer different crop options
        cropSelectPresetOptions: [
            [undefined, 'Custom'],
            [1, 'Square'],
            [16 / 9, '16:9'],
            [4 / 3, '4:3'],
        ],
    });
</script>