Question: How to fit image to stencil, when it first loads

[peterfoers]

The component works very well for me, but I haven't found out how to fit the image to the stencil instead of the whole element, when the image first loads. Consider this example:

<cropper ref="cropper" class="cropper" :src="'https://images.unsplash.com/photo-1600984575359-310ae7b6bdf2?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=700&q=80'" 
    :stencil-props="{
        aspectRatio: 1,
        movable: false,
        resizable: false,
        handlers: {},
    }"
    :resize-image="{
        adjustStencil: false,
    }"
    image-restriction="stencil"
    @change="change" />

The image has a frame around it and if I saved it now, my image would be cropped. I would like to set it up, so the image gets fit to the stencil and when the user saves it without making any adjustments, their full image gets saved. I know I can zoom out, but I'd rather the user start there.

Basically I need something similar to fill-area and fit-area for stencils.

Thanks!

[peterfoers]

OK, found it myself. You can get the desired behavior with defaultSize and stencilSize. Though, as far as I can make out, the stencil size is only needed in case a user uploads an image in the same aspect ratio as the stencil. Either way, great component!

<cropper ...
    :default-size="defaultSize"
    :stencil-size="stencilSize"
/>
...
<script>
const defaultSize = ({ imageSize }) => {
        return {
            width: Math.min(imageSize.height, imageSize.width),
            height: Math.min(imageSize.height, imageSize.width),
        }
}

const stencilSize = ({ boundaries }) => {
    return {
        width: Math.min(boundaries.height, boundaries.width) - 48,
        height: Math.min(boundaries.height, boundaries.width) - 48,
    }
}
</script>```

[Norserium]

@peterfoers, by the way, you can use defaultVisibleArea to control the image position.