如何通过Javascript裁剪图片上传？

Question

我正在构建一个需要用户拥有个人资料照片的应用。问题是上传的图像有时不是正方形，所以当它的高度太大时，图像会从上到下压缩，以适应屏幕上显示的方块。

有没有办法在我的代码中添加一些东西裁剪图像，或者可能没有压缩它以适应？

这是我的控制器上传图片：

//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");
                       });



             });

           }

         );
      });