What if my cropped image needs to be larger than the viewport and container?

[xblabs]

What I need :

• any image size input
• crop is 3:4
• cropper viewport size is set to be capped to 300 x 400 px
• result image needs to be 1200 x 1600

Currently the cropped image assumes the width / height of the viewport which is way smaller than I need it to be.

I tried to use CSS scale transforms on the container but that messes up everything.

Any further ideas?

[bret-miller]

Something like this:

$('#image-crop-container img').croppie('result',{type:'base64',size:{width:imgsize[0],height:imgsize[1]},format:'png'}).then(function(r) {
gciSaveImage(r);
; });

If you specify the image size when you get the result, you should be able to get the size of the image you need. regardless of the size of the viewport.

[xblabs]

Thanks Bret! That does not work unfortunately. the size object scales viewport render result up which is of no use.

Example :
the view port is set to 300x400px , the input image comes as 1920 x 1600
I want a crop output of 1200x1600

$uploadCrop.croppie('result', { type: 'canvas', size: {width:1200, height:1600} }).then( (resp) => { this.$uploadPreviewImage.attr( "src", resp ); })

Takes the 300x400 and upscales it to 1200x1600, losing all image information. It's all a pixelated mush,

[xblabs]

Sneaky problem. The crop container was inside a nested structure where an outer css rule said something like .outer img { max-size: 360px; } which messed up all the subsequent cropping calculations. So IMPORTANT for anyone reading this : please make sure that the crop container does NOT inherit any css restricting the size of an image.

[lbshopping]

{type:'base64',size:{width:imgsize[0],height:imgsize[1]},format:'png'}

Thanks! Works well 😍