2

I am building an app that requires the user to have a profile picture. The thing is that the image uploaded is sometimes not a square and so when it is too big in height, the image gets compressed from top to bottom to fit in the square showing up on screen.

Is there a way to add something in my code either crop the image or maybe not make it compressed to fit in ?

Here is my controller to upload the image :

//Upload Profile Picture
  $timeout(function () {

    $ionicLoading.hide();
  }, 1000);
  //Altered code from: Firebase Youtube Channel.
        //Get Elements
        var uploader = document.getElementById('uploader');
        var fileButton2 = document.getElementById('fileButton2');

        //Listen for file
        fileButton2.addEventListener('change', function(e) {

           //Get File
           var file = e.target.files[0];
           console.log("valide1");

           // Get current username
           var user = firebase.auth().currentUser.uid;
           console.log("valide2");

           // Create a Storage Ref w/ username
           var storageRef = firebase.storage().ref('/' + user + 'profilepic.jpg');
           console.log("valide3");

           // Upload file
           var task = storageRef.put(file);
           console.log("valide4");

           //Update Progress Bar
           task.on('state_changed',

           function progress(snapshot){
              var percentage = (snapshot.bytesTransferred / snapshot.totalBytes) *100;
              uploader.value = percentage;

              //if percentage = 100
              //$(".overlay").hide();
           },


           function error(err){
             console.log("valide5");
           },

           function complete(){

             $ionicLoading.show({
               content: 'Loading',
               animation: 'fade-in',
               showBackdrop: true,
               maxWidth: 200,
               showDelay: 0
             });

             var userId = firebase.auth().currentUser.uid;

             var database = firebase.database().ref('/accounts/' + userId);
             var storageRef = firebase.storage();
             var pathReference = storageRef.ref('/' + userId + 'profilepic.jpg');
             // Get the download URL
             console.log("valide6");
             pathReference.getDownloadURL().then(function(url) {
             // Insert url into an <img> tag to "download"
             $timeout(function() {
                 $scope.imageUrl = url;
                 firebase.database().ref('accounts/' + userId).update({
                   photoURL: url
                 })
                 console.log("valide7");


                 //Retrieve Profile Picture

                               console.log("valide8");




                  $state.go("tab.account");
                       });



             });

           }

         );
      });
FrenchyNYC
  • 337
  • 1
  • 6
  • 23
  • Take the image, draw it to a canvas, and use canvas methods to remove the parts you don't need, then export it back to an image (and/or just send the bytes to the server) – kemicofa ghost May 06 '17 at 14:17
  • Hello and thank you, I have to say I am a beginner in Javascript so if you could help me with the code, I would appreciate it. Thanks in advance – FrenchyNYC May 06 '17 at 14:20
  • These couple of posts sum up what I talk about: http://stackoverflow.com/questions/6011378/how-to-add-image-to-canvas , http://stackoverflow.com/questions/26015497/how-to-resize-then-crop-an-image-with-canvas . If you need explanations on certain parts let me know. Cheers. – kemicofa ghost May 06 '17 at 14:34

0 Answers0