Set Cropped width and height instead of cropit-preview width and height

[stefensuhat]

is there anyway to get different width and height?

I don't want to use cropit-preview width and height for the cropped image. I want my image crop to 1900x1080, but I dont want to show the preview 1900*1080.

Is it possible?

[nguyenquangha]

$(function() { $('.image-editor').cropit({ imageState: { // src: 'https://google.com.vn', }, smallImage: 'allow', width: 400, height: 400, }); });

[stefensuhat]

@nguyenquangha what is smallImage usage?. I dont see any changes when apply it, and I still can't get different size of result image (cropped image).

[nyn0x]

You can use "exportZoom", an example for a preview 475270 $('.image-editor').cropit({ ... exportZoom: 4, width: 475, height: 270, ... }); the exported image size will be 1900px 1080px

[hamzazafeer]

@nyn0x i want to export image of 940 x 470, and my preview area is of 400 x 400.

What value should be set in exportZoom ?

[nyn0x]

@hamzazafeer I don't think it's possible with Cropit, the proportions are not respected in your preview area.

[f1nch]

@stefensuhat @hamzazafeer I have a similar scenario. I only have a maximum height of 200px for my preview area where I'm implementing this, but it will be used for a wide range of sizes. I wrote a simple formula to calculate what to divide both dimensions so they properly scale to fit the 200px height preview area. I applied the scale number as the exportZoom property. Hopefully this helps.

var originalHeight = 1080;
var originalWidth = 1920;

var previewScale = (originalHeight / 200);

var previewHeight = Math.round(originalHeight / previewScale);
var previewWidth = Math.round(originalWidth / previewScale);

$('.image-editor').cropit({
          width: previewWidth,
          height: previewHeight,
          exportZoom: previewScale
});

@hamzazafeer your original image isn't a square so the preview can't be a square. Following the fomula your cropit properites should be:

$('.image-editor').cropit({
          width: 200,
          height: 400,
          exportZoom: 2.35
});

[shadaba1974]

Hi @f1nch . Thanks for your solution and it;s great. But here is my additional requirements: Your formula works great to define preview area. Suppose 1920X1080, convert this through your formula new preview area would be 475X270. I just want to reduce the image dimension respect to preview area. I mean if image dimensions is 400X400 then it should be loaded as 100X100 inside preview area(475X270) not with original dimensions 400X400.

Is this possible? Please tell me how it can be done? Thanks