Angular Image Resize: Now Easy with ImageEngine’s Angularjs Module

Angular Image Resize: Now Easy with ImageEngine’s Angularjs Module

angular image resize

 

 

By Luca Corbo, Senior Engineer @ScientiaMobile

 

ScientiaMobile has introduced the ImageEngine, a service that combine WURFL’s device detection, image resizing, and Content Delivery Network (CDN) all in a seamless service. ImageEngine makes it easy for front-end designers to access our image resizing service using the <img/> HTML tag code.  Having become familiar with Angular.js (and having become one of its biggest admirers in the process), I immediately started playing with the idea of marrying the power of ImageEngine with the elegance of Angular.  A few hours later, I came up with the solution that I am happy to present here. The results is module that delivers an angular image resize service. The code can be obtained at:

https://github.com/WURFL/ImageEngine-angular

Angular Image Resize via ImageEngine Service

ImageEngine requires an account and token.  You can sign up for a free 30-day trial here.

This next step is to download the directive from here . Include the image-engine-angular.js script  and include the image-engine-angular.js  directive in your angular module:

var app = angular.module("demoapp", ["image-engine-angular"]);
    app.config(function (imgEngConfigProvider) {
       imgEngConfigProvider.setToken('your-token');
       });

Now, you can use the <img-eng> tag virtually identically to how you use the classic image tag:

<img-eng src="http://yourserver.com/image.png"></img-eng>

Now, the image will be piped through ImageEngine, but without the burden of hacking your image URL to a different format.

But that’s not all.

By default, if you access the page with a mobile device,  the picture will automatically be resized based on your screen size.

However, if you know what you are doing and you want more control, you can have more control through the extra “tailoring” directives and be a master  over width, height, letterboxing and other features that WIT provides.  Parameters such as    w=”200″or h=”200″   allow you control and optimize for height or width, with no need to piggyback those parameters on the URL itself. The following examples illustrate the points:

 

Create a 300px Wide Image

<img-eng src="http://www.scientiamobile.com/page/wp-content/uploads/2014/06/20140609_133023.jpg" w="300"></img-wit>

Create 200x200px Thumbnails with Black Letterboxes/Pillarboxes

<img-eng src="http://www.scientiamobile.com/page/wp-content/uploads/2014/06/20140609_133023.jpg" w="200" h="200" m="letterbox_000000_100"> </img-wit>

This is elegant. Thank you ImageEngine and thank you, Angular.js