How do i get a fixed ratio image cropping for selected pictures

ionic-v1
1

Hey guys,

I am trying to get my users to add avatars to their profile. I’ve done up a super simple select photo script, but the cropper aspect ratio gets skewed and it the final image gets squished or stretched in the app when the image is displayed to set ratio.

is there an easy way to add to my script the ability to fix the width of the cropper? I’ve seen other android apps do that. just dont know how:

$scope.galleryOpen = function(){
    try{
        myPopup.close();
        var options = {
            quality : 100,
            destinationType : Camera.DestinationType.FILE_URI,
            sourceType : Camera.PictureSourceType.PHOTOLIBRARY ,
            allowEdit : true,
            targetWidth: 250,
            targetHeight: 250,
            encodingType: Camera.EncodingType.JPEG,
            popoverOptions: CameraPopoverOptions,
            correctOrientation: true
        };
        $cordovaCamera.getPicture(options).then(function(imageData) {
            function convertImgToBase64(url, callback, outputFormat){
                var canvas = document.createElement('CANVAS'),
                    ctx = canvas.getContext('2d'),
                    img = new Image;
                img.crossOrigin = 'Anonymous';
                img.onload = function(){
                    var dataURL;
                    canvas.height = img.height;
                    canvas.width = img.width;
                    ctx.drawImage(img, 0, 0);
                    dataURL = canvas.toDataURL(outputFormat);
                    callback.call(this, dataURL);
                    canvas = null; 
                };
                img.src = url;
            }

            convertImgToBase64(imageData, function(base64Img){
                $scope.ProfilePic = base64Img;
                $scope.uploadImage();
            });
        }, function(err) {
            alert(err.message);
        });
    }
    catch(err){
        alert(err.message);
    }
};

is it easier do you think to fix the ratio of the cropper OR is it easier to change the size of the final image so its not fixed and then have my code in css try and scale to fixed width?

thanks for your help! (also this code seems to only work in android , not in iOS, not sure why, thats problem two later).

2

UPDATE: (for those interested) i changed the saved path dems and that seems to work for the native cropper in android 5.1+ , I have no idea about lower versions at this time but it saves tons of space and time adding an angular library to do the cropping.