custom size for canvas, image and cropper area

[snake-venom-nk]

I am trying to achieve the fixed size of the canvas area, the image size should come less than canvas area, and cropping area height should be equal to image height and cropping area width should be image width + some extra space like 20px margin.
to do this I am trying to below test, but my result is coming accurate or a little bit similar.

Do you have any idea or suggestion, please?

My Script:

    cropper = new Cropper(image, {
    
    		    cropBoxResizable: true,
                cropBoxMovable: true,
                dragMode: 'move',
                left: 0,
                top: 0,
       
                toggleDragModeOnDblclick: true,
                zoomOnTouch: true,
                zoomOnWheel: true,
        
                minContainerWidth: 500,
                minContainerHeight: 500,

                minCanvasWidth : 400,
                minCanvasHeight :400,

                minCropBoxWidth: 200,
                minCropBoxHeight: 200,
    		    ready: function () {
    	        	
    		    }
    });

PlayGround: https://jsfiddle.net/bke1od4w/

expected result in the image:

[fengyuanchen]

Duplicate of a lot of other issues!!!

1. Don't try to limit the real size of the crop box, it is a virtual viewport!
2. Just use the viewMode option to limit the viewport!
3. And then use the width and height options of the getCroppedCanvas method to convert the canvas to your wanted size!

[inorganik]

viewMode is deprecated in v2. How can we ensure an image doesn't overflow the containing element?

For instance, I have a 358x400px div to hold Cropper (this is on mobile). If I load an 1127x634px image, it is mostly hidden, I only see the corner of it. I would like it to display at a scaled resolution of 358x201px, without that affecting the size of the resulting crop. Is it possible?

I'm afraid if I set the dimensions to fit the image in my container it will reduce the resolution of the cropped image. If I add CSS like so, it scrunches the image horizontally:

cropper-image {
  max-width: 100%;
  height: auto;
}

...whereas with an <img> element, the image would scale. Is there an aspect fit option? Thanks.

[fengyuanchen]

@inorganik As of v2, the image is transformed by matrix, so it is hard to calculate its actual visual dimension.

const matrix = cropperImage.$getTransform();

// Try to calculate the following values with the `matrix` by yourself.
const visualX = ?;
const visualY = ?;
const visualWidth = ?;
const visualHeight = ?;

[JoshThomson7]

Can you tell me how to change the cropper dimensions from a square to a rectangle?

[fengyuanchen]

@JoshThomson7 How about the aspectRatio option?