Cropping a Square Image

Using Doka we can easily set up a cropper that will crop input images to square output images.

Setting a crop aspect ratio

Using the cropAspectRatio property we can tell Doka that the crop aspect ratio should always be a certain ratio.

Doka.create({
    cropAspectRatio: 1
})

Meaning the ratio between the width and height of the crop needs to be 1, resulting in a square crop rectangle at all times.

Offering more aspect ratio options

We can offer more options to the user by adding the cropAspectRatioOptions property.

Doka.create({
    cropAspectRatio: 1,
    cropAspectRatioOptions: [
        {
            label: 'Free',
            value: null
        },
        {
            label: 'Portrait',
            value: 1.5
        },
        {
            label: 'Square',
            value: 1
        },
        {
            label: 'Landscape',
            value: 0.75
        }
    ]
})

Doka will now preselect the "Square" option in the new active crop options dropdown.

Allowing to crop outside of the image

Sometimes we need to enforce an aspect ratio but the image we need to crop just slightly mismatches the aspect ratio causing it to become difficult or impossible to crop the pixels we need.

Setting the cropLimitToImageBounds to false will allow the user to crop outside of the image bounds and select "transparent" pixels.