Resize Image about angular-base64-upload HOT 7 OPEN

resizeImage: function ( file ) {

    var resized = {};

    var deferred = $q.defer();

    var img = document.createElement("img");
    var reader = new FileReader();
    reader.onload = function(e) {
         // resize the picture
         img.src = e.target.result;

        var canvas = document.createElement("canvas");

        var MAX_WIDTH = 150;
        var MAX_HEIGHT = 150;
        var width = img.width;
        var height = img.height;

        if (width > height) {
          if (width > MAX_WIDTH) {
            height *= MAX_WIDTH / width;
            width = MAX_WIDTH;
          }
        } else {
          if (height > MAX_HEIGHT) {
            width *= MAX_HEIGHT / height;
            height = MAX_HEIGHT;
          }
        }
        canvas.width = width;
        canvas.height = height;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0, width, height);

        resized.base64 = canvas.toDataURL("image/png");
        deferred.resolve(resized);
    };
    reader.readAsDataURL(file, "UTF-8");

    return deferred.promise;

  }

 <input ... parser="resizeImage" base-sixty-four-input>

      $scope.resizeImage = function (file, base64) {
        var deferred = $q.defer();
        // We create an image to receive the Data URI
        var img = document.createElement('img');

        // When the event "onload" is triggered we can resize the image.
        img.onload = function()
            {
                // We create a canvas and get its context.
                var canvas = document.createElement('canvas');
                var ctx = canvas.getContext('2d');

                // We set the dimensions at the wanted size.
                canvas.width = 100;
                canvas.height = 100;

                // We resize the image with the canvas method drawImage();
                ctx.drawImage(this, 0, 0, 100, 100);

                var dataURI = canvas.toDataURL();
                base64.resizedDataURI = dataURI;
                deferred.resolve(base64);

                $scope.$apply();

                /////////////////////////////////////////
                // Use and treat your Data URI here !! //
                /////////////////////////////////////////
            };
        img.src = 'data:'+base64.filetype+';base64,'+base64.base64;
        return deferred.promise;
      };


<input type="file" ng-model="file" name="file" base-sixty-four-input accept="image/*" parser="resizeImage">