How to change the viewpoint size when croppie initilized in vanilla js
arnav-kr opened this issue · 5 comments
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?
Is this no longer maintained?
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(cw*0.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'}
});
}
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(cw*0.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
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.
For anyone interested, I developed a modern fork called Cropt which supports dynamic viewport resizing via the setOptions() method: https://github.com/theodorejb/cropt