How to reduce image quality in upload using Cordova and Ionic 1?

Question

Using the Cordova plugin:

cordova-plugin-file
cordova-plugin-file-transfer
cordova-plugin-filepath
cordova-plugin-camera
cordova-plugin-actionsheet

Who together use this code template:

`// Present Actionsheet for switch beteen Camera / Library
        $scope.loadImage = function () {
            var options = {
                title: 'Qual recurso deseja para a imagem?',
                buttonLabels: ['Ler de sua Galeria de Imagens', 'Usar a Câmera - posicione horizontalmente o celular ao tirar a foto'],
                addCancelButtonWithLabel: 'Cancelar',
                androidEnableCancelButton: true,
            };
            $cordovaActionSheet.show(options).then(function (btnIndex) {
                var type = null;
                if (btnIndex === 1) {
                    type = Camera.PictureSourceType.PHOTOLIBRARY;
                } else if (btnIndex === 2) {
                    type = Camera.PictureSourceType.CAMERA;
                }
                if (type !== null) {
                    $scope.selectPicture(type);
                }
            });
        };


        // Take image with the camera or from library and store it inside the app folder
        // Image will not be saved to users Library.
        $scope.selectPicture = function (sourceType) {
            var options = {
                quality: 100,
                destinationType: Camera.DestinationType.FILE_URI,
                sourceType: sourceType,
                saveToPhotoAlbum: false
            };

            $cordovaCamera.getPicture(options).then(function (imagePath) {
                    // Grab the file name of the photo in the temporary directory
                    var currentName = imagePath.replace(/^.*[\\\/]/, '');

                    //Create a new name for the photo
                    var d = new Date(),
                        n = d.getTime(),
                        newFileName = n + ".jpg";

                    // If you are trying to load image from the gallery on Android we need special treatment!
                    if ($cordovaDevice.getPlatform() == 'Android' && sourceType === Camera.PictureSourceType.PHOTOLIBRARY) {
                        window.FilePath.resolveNativePath(imagePath, function (entry) {
                            window.resolveLocalFileSystemURL(entry, success, fail);

                            function fail(e) {
                                console.error('Error: ', e);
                            }

                            function success(fileEntry) {
                                var namePath = fileEntry.nativeURL.substr(0, fileEntry.nativeURL.lastIndexOf('/') + 1);
                                // Only copy because of access rights
                                $cordovaFile.copyFile(namePath, fileEntry.name, cordova.file.dataDirectory, newFileName).then(function (success) {
                                    $scope.image = newFileName;
                                }, function (error) {
                                    $scope.showAlert('Error', error.exception);
                                });
                            };
                        });
                    } else {
                        var namePath = imagePath.substr(0, imagePath.lastIndexOf('/') + 1);
                        // Move the file to permanent storage
                        $cordovaFile.moveFile(namePath, currentName, cordova.file.dataDirectory, newFileName).then(function (success) {
                            $scope.image = newFileName;
                        }, function (error) {
                            $scope.showAlert('Error', error.exception);
                        });
                    }
                },
                function (err) {
                    // Not always an error, maybe cancel was pressed...
                })
        };


        // Returns the local path inside the app for an image
        $scope.pathForImage = function (image) {
            if (image === null) {
                return '';
            } else {
                return cordova.file.dataDirectory + image;
            }
        };


        $scope.uploadImage = function () {
            // Destination URL
            //      var url = "http://vovocooks.com.br/teste/upload.php";

            // File for Upload
            var targetPath = $scope.pathForImage($scope.image);

            // File name only
            var filename = $scope.image;;

            var options = {
                fileKey: "file",
                fileName: filename,
                chunkedMode: false,
                mimeType: "multipart/form-data",
                params: {
                    'fileName': filename
                }
            };

            $cordovaFileTransfer.upload(url, targetPath, options).then(function (result) {
                $scope.showAlert('Success', 'Image upload finished.');
            });
        }`

How can I reduce image size and quality before/or(during) uploading the image to the server?

Answer 1

In 'quality' I put 20 and reduced by 80%:

 $scope.selectPicture = function (sourceType) {
            var options = {
                quality: 20,
                destinationType: Camera.DestinationType.FILE_URI,
                sourceType: sourceType,
                saveToPhotoAlbum: false
            };