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<https://github.com/leonzinger/ng-image-resize>which is
inspired by
this<http://blog.liip.ch/archive/2013/05/28/resizing-images-with-javascript.html>,
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
On Mon, Dec 30, 2013 at 4:04 PM, ANSURAJ KHADANGA <[email protected]> wrote:
> 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
>
>
>
> On Friday, December 27, 2013 1:19:01 PM UTC+5:30, Aadithya Udupa wrote:
>
>> Have you checked this out? http://bit.ly/19squST
>>
>> /Aadithya
>>
>>
>> On Fri, Dec 27, 2013 at 1:13 PM, ANSURAJ KHADANGA <[email protected]>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 [email protected].
>>> To post to this group, send email to [email protected].
>>>
>>> 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
>>
> --
> 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 [email protected].
> To post to this group, send email to [email protected].
> 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
--
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 [email protected].
To post to this group, send email to [email protected].
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/groups/opt_out.
