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.
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
- Use of Html Canvas element in conjunction with AngularJS
- Use of various Html Canvas element properties
- Use of CSS properties
- How to create photo collage in AngularJS.
Hope this will be useful. Thanks for reading. Zipped file attached.