It’s a fact that iOS7 has made blurred backgrounds the new in thing. So I thought in making a tag with angularJS that automatically makes this effect to a given image so there’s no need to use any software to modify an image.

In order to make a nice example, I will try to make a iOS7-like login screen that will look like this:
iOS7 like Login screen

The skeleton of the directive will be this one:

   var ios7login = angular.module('ios7login', []);

   ios7login.directive('blurredImage', function(){
    return {
        restrict: 'E',
        replace:true,
        scope: {
            src:'@',
            width:'=',
            height:'=',
            cssClass:'='
        },
        link: function(scope, element, attrs){
            scope.itemId = "canvas_" + parseInt(Math.random()*1000000000)
            var fillCanvas = function(){
              //Fill canvas and blur image   
            }

            scope.$watch('src', function(){ //watch for a change in the src File to update de background image
                fillCanvas(); 
            });
        },
        template: '<canvas id="{{ itemId }}" class="{{ cssClass }}" style="width:{{width}}px; height:{{height}}px"></canvas>'
    };
});

There are two main differences, if we compare it with the directive from my last post:

  • The directive declaration is restricted to element type. So we are going to declare a <blurred-image> tag.
  • We have created an isolated scope for this directive, which is a good thing to make this component reusable

In order to blur the image, i have user Quasimondo’s SuperFast Blur javascript library. So the full declaration of the directive will be:

ios7login.directive('blurredImage', function(){
    return {
        restrict: 'E',
        replace:true,
        scope: {
            src:'@',
            width:'=',
            height:'=',
            cssClass:'='
        },
        link: function(scope, element, attrs){
            scope.itemId = "canvas_" + parseInt(Math.random()*1000000000)
            var fillCanvas = function(){
                if(!scope.src)
                    return;
                
                var context = element[0].getContext("2d"); // get the 2d context object
                var img     = new Image() //create a new image
               
                img.onload = function(){
                    context.drawImage(img, 0, 0, scope.width, scope.height); // draw the image at the given location
                    boxBlurCanvasRGBA( scope.itemId, 0, 0, scope.width, scope.height, 2, 40);
                };
                
                img.crossOrigin = '';
                img.src = scope.src
                
            }

            scope.$watch('src', function(){
                fillCanvas();
            });
        },
        template: '<canvas id="{{ itemId }}" class="{{ cssClass }}" style="width:{{width}}px; height:{{height}}px"></canvas>'
    };
});

Once the directive is created and we have the blur function, it’s all done. We’ll use a bit of css and a nice font to complete the form.

This fiddle has a working example of the directive, with a selector of background images.

Ah! One important thing: if we want to use images from other sites, the server with the images needs to have CORS support for media elements. Google+ has CORS enabled, so all images used in the example are from there. More info here.

Anuncios