search

Foliotek / Croppie

A Javascript Image Cropper
http://foliotek.github.io/Croppie
MIT License
2.58k stars 883 forks source link

How to change the viewpoint size when croppie initilized in vanilla js #754

Open arnav-kr opened 3 years ago

arnav-kr commented 3 years ago

I want to modify the viewpoint size according to my window width

but its not working

here's my code

c.viewport = { width: getByRatio("4:3", id("upload-preview")).width, height: getByRatio("4:3", id("upload-preview")).height, type: "square" };
c.boundary = { width: getByRatio("4:3", id("upload-preview")).width, height: getByRatio("4:3", id("upload-preview")).height };

How can I do that?

arnav-kr commented 3 years ago

Is this no longer maintained?

bret-miller commented 3 years ago

Not much has changed in a while for sure. There have been minor edits since I started using it. And it seems to work OK for what I need. Here is how I handle sizing the viewport. The function is used by every place I need to crop an image to a specific size and aspect ratio. The size and aspect ratio vary, so I parse it from a text field (id="image-info"). Basically, you need to calculate the width and height yourself before you call croppie.

function gciCropImage() { var infostr=$('#image-info').val(); //which+','+aspect+','+expectedsize (w x h) var info=infostr.split(','); var imgsize=info[2].split(' x '); var cw=$('#image-crop-container').width(); var ch=$('#image-crop-container').height(); if ((cw > ch) && (info[1]=='1x1')) { $('#image-crop-container').width(ch); cw=$('#image-crop-container').width(); } var vpw=parseInt(cw0.8); var vph=parseInt(vpw/imgsize[0]imgsize[1]); var img=$('#image-crop-container img').attr('src'); $('#image-crop-container img').croppie({ url:img, enableOrientation:1, enforceBoundary:0, viewport:{width:vpw,height:vph,type:'square'} }); }

arnav-kr commented 3 years ago

Not much has changed in a while for sure. There have been minor edits since I started using it. And it seems to work OK for what I need. Here is how I handle sizing the viewport. The function is used by every place I need to crop an image to a specific size and aspect ratio. The size and aspect ratio vary, so I parse it from a text field (id="image-info"). Basically, you need to calculate the width and height yourself before you call croppie.

function gciCropImage() { var infostr=$('#image-info').val(); //which+','+aspect+','+expectedsize (w x h) var info=infostr.split(','); var imgsize=info[2].split(' x '); var cw=$('#image-crop-container').width(); var ch=$('#image-crop-container').height(); if ((cw > ch) && (info[1]=='1x1')) { $('#image-crop-container').width(ch); cw=$('#image-crop-container').width(); } var vpw=parseInt(cw0.8); var vph=parseInt(vpw/imgsize[0]imgsize[1]); var img=$('#image-crop-container img').attr('src'); $('#image-crop-container img').croppie({ url:img, enableOrientation:1, enforceBoundary:0, viewport:{width:vpw,height:vph,type:'square'} }); }

One thing I forgot to mention that I want it to resize croppie when I resize my window

I already have the functions to get aspect ratios

what I meant is say I have my window innerWidth be 512px and according to that I calculated my croppie size. Till now all is ok. The problem comes when i start resizing my window innerWidth to say 1024px and set the calculated width and height to croppie but croppie in DOM doesn't updates its dimensions

bret-miller commented 3 years ago

Yeah... croppie doesn't handle dynamic resizing. You would have to catch the after resize event, delete the croppie instance and re-create it with the new dimensions.

theodorejb commented 10 months ago

For anyone interested, I developed a modern fork called Cropt which supports dynamic viewport resizing via the setOptions() method: https://github.com/theodorejb/cropt