Crop a square image

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

import { openDefaultEditor } from './doka.js';

// Open the default image editor in a modal
const editor = openDefaultEditor({
    src: './my-image.jpeg',

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

// Show resulting image preview
editor.on('process', ({ dest }) => {
    const preview = new Image();
    preview.src = URL.createObjectURL(dest);
    document.body.appendChild(preview);
});

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:

import { openDefaultEditor } from './doka.js';

// Open the default image editor in a modal
const editor = openDefaultEditor({
    src: './my-image.jpeg',

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

// Show resulting image preview
editor.on('process', ({ dest }) => {
    const preview = new Image();
    preview.src = URL.createObjectURL(dest);
    document.body.appendChild(preview);
});

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.

import { openDefaultEditor } from './doka.js';

// Open the default image editor in a modal
const editor = openDefaultEditor({
    src: './my-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'],
    ],
});

// Show resulting image preview
editor.on('process', ({ dest }) => {
    const preview = new Image();
    preview.src = URL.createObjectURL(dest);
    document.body.appendChild(preview);
});