A step by step approach to make a Photo Collage in AngularJS

Rajnilari2015
Posted by in AngularJS category on for Beginner level | Points: 250 | Views : 1332 red flag

A Collage is a collection of different elements in unlikely juxtaposition. A photo collage is a collection of pictures that are put together to make a single picture. In this article we will perform a step by step approach to make a Photo Collage using AngularJS.


 Download source code for A step by step approach to make a Photo Collage in AngularJS

Recommendation
Read Pagination using EmberJS and WebAPI before this article.

Introduction

A Collage is a collection of different elements in unlikely juxtaposition. A photo collage is a collection of pictures that are put together to make a single picture. In this article we will perform a step by step approach to make a Photo Collage using AngularJS.

Straight to experiment

Step 1 : Photo Collection

Let us first create a folder by the name "images" and gather some photos to it

Step 2 : Create the view

Let us first create a html view say "index.html" as under

<!DOCTYPE html>
<html >
<head> 
    <title>Photo Collage - RNA Team</title>
    <script src="http://code.angularjs.org/1.2.0rc1/angular.js"></script>    
</head>
<body>   
    <div style="width: 60%; margin: 0 auto;">    
        <canvas id="cnvPhoto" width="800" height="600" style="border:1px solid #000000;"></canvas>
    </div>  
</body>
</html>

A simple html file, where we have added the angularJS reference and added a Html5 canvas to it. The purpose of having a canvas element is to draw graphics on the fly in the web page. The canvas element is only a container for graphics. In order to draw the graphics, we need to use javascript. If we run it at this point, we will get an empty canvas as under

Step 3 : Create the controller

Let us first create a javascript file say "photocollage.js" in which we will write our controller. We will first define the image sources as under

angular
.module('photoCollageModule', [])
.controller('photoCollageCtrl', function ($scope) {

var imgSource = {
                    photo1: 'images/1.jpg',
                    photo2: 'images/2.jpg',
                    photo3: 'images/3.jpg',
                    photo4: 'images/4.jpg',
                    photo5: 'images/5.jpg',
                    photo6: 'images/6.jpg',
                    photo7: 'images/7.jpg',
                    photo8: 'images/8.jpg',
                    photo9: 'images/9.jpg',
                    photo10: 'images/10.jpg',
                    photo11: 'images/11.jpg'
                };
});

We have initially defined "imgSource" object.

Now let us create a function for rotating and drawing the images

function rotatePhotos(imgSrc,x,y,width,height,deg) { 
    
    var canvas=document.getElementById("cnvPhoto"); //get the canvas element

    var context=canvas.getContext("2d"); //create a two-dimensional rendering context.

    var img = new Image();//create HTMLImageElement instance
    img.src = imgSrc; 

    var rad = deg * Math.PI / 180; //create radian that will be use for making angle
    
    context.translate(x + width / 2, y + height / 2); //translates the canvas coordinate system
    context.rotate(rad); // rotates the current drawing element on the canvas      

    context.drawImage(img,width / 2 * (-1),height / 2 * (-1),width,height); //draws the image onto the canvas
    
    context.rotate(rad * ( -1 ) );
    context.translate((x + width / 2) * (-1), (y + height / 2) * (-1)); 
}

At first we are getting the canvas element by using the getElementById method. Then we are creating a two-dimensional rendering context of the Canvas element. Next we are creating HTMLImageElement instance by using

new Image();

and setting the image source to it. Next we are defining the radian that will be use as the angle in which the image to rotate. The canvas translate method is used to translate the canvas coordinate system. The canvas rotate method rotates the current drawing element on the canvas. Finally by using the canvas drawImage() method, we are drawing the image(s) onto the canvas.

Now we need to invoke the rotatePhotos function as under

function loadCollagePhotos() {        
        rotatePhotos(imgSource.photo1, 0, 0, 900, 600,0);    
        rotatePhotos(imgSource.photo2,-20,-20, 300, 224,-30);
        rotatePhotos(imgSource.photo3, 380, 55,577, 284,-20);
        rotatePhotos(imgSource.photo4, 580, 0,305, 284,-50);
        rotatePhotos(imgSource.photo5, 320, 430,277, 184,20);
        rotatePhotos(imgSource.photo6, 130, 150,350, 274,0);    
        rotatePhotos(imgSource.photo7, 0, 380, 240,160,-10);
        rotatePhotos(imgSource.photo8, 45, 280, 350,360,50);
        rotatePhotos(imgSource.photo9, 410, 560,507, 154,-80);
        rotatePhotos(imgSource.photo10, 410, 200,207, 254,-20);
        rotatePhotos(imgSource.photo11, 230, 60, 300, 100,0);
    };

In this function we are passing the Image Source(imgSrc),the x co-ordinate(x), y co-ordinate(y), image width(width),image height(height), and the angle (deg) in which the image should rotate.

Our entire controller program looks as under

angular
.module('photoCollageModule', [])
.controller('photoCollageCtrl', function ($scope) {

//define the image source(s)
var imgSource = {
                    photo1: 'images/1.jpg',
                    photo2: 'images/2.jpg',
                    photo3: 'images/3.jpg',
                    photo4: 'images/4.jpg',
                    photo5: 'images/5.jpg',
                    photo6: 'images/6.jpg',
                    photo7: 'images/7.jpg',
                    photo8: 'images/8.jpg',
                    photo9: 'images/9.jpg',
                    photo10: 'images/10.jpg',
                    photo11: 'images/11.jpg'
                };                
    loadCollagePhotos(); //load the collage photos on Page Load

    function loadCollagePhotos() {        
        rotatePhotos(imgSource.photo1, 0, 0, 900, 600,0);    
        rotatePhotos(imgSource.photo2,-20,-20, 300, 224,-30);
        rotatePhotos(imgSource.photo3, 380, 55,577, 284,-20);
        rotatePhotos(imgSource.photo4, 580, 0,305, 284,-50);
        rotatePhotos(imgSource.photo5, 320, 430,277, 184,20);
        rotatePhotos(imgSource.photo6, 130, 150,350, 274,0);    
        rotatePhotos(imgSource.photo7, 0, 380, 240,160,-10);
        rotatePhotos(imgSource.photo8, 45, 280, 350,360,50);
        rotatePhotos(imgSource.photo9, 410, 560,507, 154,-80);
        rotatePhotos(imgSource.photo10, 410, 200,207, 254,-20);
        rotatePhotos(imgSource.photo11, 230, 60, 300, 100,0);
    };

    //this function rotate photos and draws the same on the canvas.
    function rotatePhotos(imgSrc,x,y,width,height,deg) { 
        
        var canvas=document.getElementById("cnvPhoto"); //get the canvas element

        var context=canvas.getContext("2d"); //create a two-dimensional rendering context.

        var img = new Image();//create HTMLImageElement instance
        img.src = imgSrc; 

        var rad = deg * Math.PI / 180; //create radian that will be use for making angle
        
        context.translate(x + width / 2, y + height / 2); //translates the canvas coordinate system
        context.rotate(rad); // rotates the current drawing element on the canvas      

        context.drawImage(img,width / 2 * (-1),height / 2 * (-1),width,height); //draws the image onto the canvas
        
        context.rotate(rad * ( -1 ) );
        context.translate((x + width / 2) * (-1), (y + height / 2) * (-1)); 
    }   

}); //end of controller

Also we need to make the corresponding changes (only need to add the photocollage.js reference) to our view (index.html)

<!DOCTYPE html>
<html >
<head> 
    <title>Photo Collage - RNA Team</title>
    <script src="http://code.angularjs.org/1.2.0rc1/angular.js"></script>
    <script src="photocollage.js"></script>    
</head>
<body ng-app="photoCollageModule" ng-controller="photoCollageCtrl">   
    <div style="width: 60%; margin: 0 auto;">    
        <canvas id="cnvPhoto" width="800" height="600" style="border:1px solid #000000;"></canvas>
    </div>  
</body>
</html>

Now let us run the application and the output is as under

Cool!!!. So our basic collage is done. Now we will apply some style sheets to it. So let's change our view agian as under.

<!DOCTYPE html>
<html >
<head> 
    <title>Photo Collage - RNA Team</title>
    <style>          
          canvas 
          {
                box-shadow: 8px 8px 5px #bebef3;               
                border: 15px solid #E6E6FA;
                padding: 10px;
                border-radius: 5%;
          }
        </style>
    <script src="http://code.angularjs.org/1.2.0rc1/angular.js"></script>
    <script src="test.js"></script>    
</head>
<body ng-app="photoCollageModule" ng-controller="photoCollageCtrl">   
    <div style="width: 60%; margin: 0 auto;">    
        <canvas id="cnvPhoto" width="800" height="600" style="border:1px solid #000000;"></canvas>
    </div>  
</body>
</html>

We have used the box-shadow property for adding drop-shadow effect to the canvas

box-shadow: 8px 8px 5px #bebef3;

For displaying a "frame" , we have used

border: 15px solid #E6E6FA;
padding: 10px;

And for the rounded corner, we used the border-radius property

border-radius: 5%

Let us run the application again and the output is as under

Reference

HTML5 Canvas

CSS Reference

Conclusion

In this article we have learnt at the bare minimum

  1. Use of Html Canvas element in conjunction with AngularJS
  2. Use of various Html Canvas element properties
  3. Use of CSS properties
  4. How to create photo collage in AngularJS.

Hope this will be useful. Thanks for reading. Zipped file attached.

Page copy protected against web site content infringement by Copyscape

About the Author

Rajnilari2015
Full Name: Niladri Biswas (RNA Team)
Member Level: Platinum
Member Status: Member,Microsoft_MVP,MVP
Member Since: 3/17/2015 2:41:06 AM
Country: India
-- Thanks & Regards, RNA Team


Login to vote for this post.

Comments or Responses

Posted by: M_Imranbest on: 10/7/2016 | Points: 25
Nice Article.

Login to post response

Comment using Facebook(Author doesn't get notification)