Re: [AngularJS] How to resize images with angularjs

[Aadithya C Udupa]

Have you checked this out? http://bit.ly/19squST

/Aadithya

On Fri, Dec 27, 2013 at 1:13 PM, ANSURAJ KHADANGA <ans...@gmail.com> wrote:

Hello I come from a jquery backgrand. I am looking for a directive/module to resize images in client side, just like that of jquery-ui resize feature. If there is any feature in Angular to achieve it, Please let me know.

Thanks in adance,

Ansuraj

--
You received this message because you are subscribed to the Google Groups "AngularJS" group.
To unsubscribe from this group and stop receiving emails from it, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/groups/opt_out.

--
Regards,
Aadithya C Udupa

[ANSURAJ KHADANGA]

Hello Aadithya, I want to enable image re-sizing similar to that of in jQuery UI ( with handlers and stuff ). I did not find any demo link to understand and work on. If you have worked on it, let me know.

Thanks,

Ansuraj 

[Aadithya C Udupa]

Hey Ansuraj,

I cannot send a plnkr as I cannot upload images there and by linking it to external images, I get an error as "Failed to execute 'toDataURL' on 'HTMLCanvasElement': tainted canvases may not be exported". So here is an implementation using angular-way which is inspired by this, with some minor modifications. Works for me!

In your html page add:

<img ng-src="{{imageUrl}}" image-resize image-percent="25" />

In your app.js, add:

app.directive("imageResize", [
  "$parse", function($parse) {
    return {
      link: function(scope, elm, attrs) {
        var imagePercent;
        imagePercent = $parse(attrs.imagePercent)(scope);
        elm.bind("load", function(e) {
          elm.unbind("load"); //Hack to ensure load is called only once
          var canvas, ctx, neededHeight, neededWidth;
          neededHeight = elm[0].naturalHeight * imagePercent / 100;
          neededWidth = elm[0].naturalWidth * imagePercent / 100;
          canvas = document.createElement("canvas");
          canvas.width = neededWidth;
          canvas.height = neededHeight;
          ctx = canvas.getContext("2d");
          ctx.drawImage(elm[0], 0, 0, neededWidth, neededHeight);
          elm.attr('src', canvas.toDataURL("image/jpeg"));
        });
      }
    };
  }
]); 

Please let me know if you have any questions

Regards,

Aadithya