how to make the crop box fixed to ratio 1:1?

[nazrinadiah]

I am doing a project for school. We want the crop box unable to resize but fixed to 1:1 ratio or 2cm x 2cm.

[bret-miller]

This is how I do it:

First, set the viewport size to the right aspect ratio:

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');
var el = document.querySelector('#image-crop-container img');
cropper = new Cropper(el,{
aspectRatio: cw/ch,
dragMode: 'move',
cropBoxMovable: false,
cropBoxResizable: false,
zoom: gciImageZoomHandler,
ready: function() { cropper.zoom(0); }
});
}

// Get the cropped image as a base64 PNG.
function gciGetCroppedImage() {
var infostr=$('#image-info').val(); //which+','+aspect+','+expectedsize (w x h)
var info=infostr.split(',');
var imgsize=info[2].split(' x ');
var imgCanvas = cropper.getCroppedCanvas({width:imgsize[0], height:imgsize[1], imageSmooothingQuality:'high'});
var imgdata = imgCanvas.toDataURL();
cropper.destroy();
$('#image-crop').dialog('close');
gciSaveImage(imgdata);
}

// Then on the server side in PHP, I save the image as a file:
// Save Image (after crop)
function saveImage($WebUri,$filename,$imageData) {
$si=getSiteInfo($WebUri);
$imageData = substr($imageData,strpos($imageData, ",") + 1);
$imageData = base64_decode($imageData);
//file_put_contents($newfilepath, $imageData);
//$img = imagecreatefromstring(file_get_contents($newfilepath));
$img = imagecreatefromstring($imageData);
if ($filename=='logoimg') { // logos are png, so just save uploaded data
$newfile=$filename.'.png';
$newfilepath=$si['folder'].$newfile;
//imagepng($img, $newfilepath); // save the converted png file
/*
// Base64 save example.
list($type, $data) = explode(';', $data);
list(, $data) = explode(',', $data);
$data = base64_decode($data);
file_put_contents($newfilepath, $data);
*/
file_put_contents($newfilepath, $imageData);
} else { // other files are jpg
$newfile=$filename.'.jpg';
$newfilepath=$si['folder'].$newfile;
imageJpeg($img, $newfilepath, 70); // save the converted jpg file
}
$origfile = $si['folder'].$filename.'-orig'.substr($newfile,-4);
if (file_exists($origfile)) {
unlink($origfile);
}
return $newfile;
}

Now, image sizes are really measured in pixels, so to get an image that is exactly 2cm x 2cm, you have to set the dots per cm, and then resize the image to 2cm x 2cm to get the metadata set correctly.

[nazrinadiah]

Thank you! God Bless You! We will try and let you know how it goes.