Resize Image

[bersling]

It would be nice to have an attribute for resizing an image, instead of having to write a parser yourself. Because after 2h of trying I still can't get my own parser to work. I am trying it to do with the canvas trick, but I think canvas.toDataURL(fileType) as resized isn't accepted by var modelVal = {file:file, resized: resized}.

[AlexVKO]

+1

[adonespitogo]

@bersling You may need to use $scope.$apply() if your using img.onload = function (). Anyway I'm working on this. Will give you update soon.

[adonespitogo]

@AlexVKO Please try this code:

      $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">

The resized image is the base64.resizedDataURI.

[kymowang]

onload="postLoadFunc" parser="resizeImage", resizeImage will execute before postLoadFunc, but postLoadFunc will execute before resizeImage return. here is the log: before resize, begin upload, after resize. What i want is before resize, after resize, begin upload. hope you can catch what i said.

[GianlucaBobbio]

I'm trying this but I still see the unresized base64. Do you have any plucker of your example?

[bersling]

Here's the resize function I've been using now for a while:

js

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;

  }

html

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

Note that you need the $q service. Here is a fiddle: http://fiddle.jshell.net/51bsbzL0/93/

[GianlucaBobbio]

Thank you very much sir. Everything working now.