This article will show you a complete example of how to create a photo collage in HTML5 using CSS3 — from dragging and dropping images to saving the resulting photo collage image on your file. You will find all the needed files types are listed here, so can improve your photo collage skills.
In the figures below, you will see the structure of the files needed to create this application:
The index.html file contains the divs corresponding uploaded images that were created by dragging and dropping. You can also click in that area and an Open window will appear in which you can select your photo collage pattern. In our example, there are three patterns from which to choose, as you will see next. Another one will let you choose a background for your collage via browsing on your computer and the last option is to save your photo collage image, by pressing the link Save your collage image.
<!DOCTYPE html>
<html>
<head>
<title>Collage photo's</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="css/styles.css" rel="stylesheet" type="text/css"/>
</head>
<body id="body">
<h1>Collage</h1>
<div class="row">
<div class="column">
<div id="leftSide">
<div id="dropZone">
<p>Drag your images from your file sau click <u>here</u>!</p>
</div>
<div id="images_preview"></div>
</div>
</div>
<div class="column">
<div id="buttonsArea">
<select id="modelSelect" onchange="modelSelect()">
<option value="">Select the pattern</option>
<option value="model1">Model 1</option>
<option value="model2">Model 2</option>
<option value="model3">Model 3</option>
</select>
<div id="singleUploadSection">
Click "Browse" to select a background image for your canvas!
<input id="singleUpload" type="file" onchange="setBackground()"/>
</div>
<a href="#" class="button" id="btn-download">Save your collage image</a>
</div>
</div>
<div id="photo">
<canvas id="background" width="600" height="600"></canvas>
</div>
<div id="images"></div>
</div>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/fileUpload.js"></script>
<script src="js/script.js"></script>
</body>
</html>
styles.css
/**************
* Page Layout *
**************/
body {
margin: 0;
background-color: #e1e6c4;
}
* {
box-sizing: border-box;
}
/* Create columns that floats next to each other */
.column {
float: left;
}
/* Clear floats after the columns */
.row:after {
content: "";
display: table;
clear: both;
}
/******************
* Style for title *
******************/
h1 {
color: #239aca;
text-align: center;
}
h1:first-letter{
color:#1B6685;
}
/******************************
* Style for left side content *
******************************/
#leftSide {
color: #aaa;
width: 186px;
padding: 5px;
margin: 0 20px;
overflow: auto;
background-color: #fff;
border: dashed 1px #bbb;
box-shadow: 0px 0px 0px 5px #f7f7f7, 0px 0px 2px 7px #bbb, 0px 0px 5px 5px #f7f7f7 inset;
}
/***************************
* Style for drop zone area *
***************************/
#dropZone {
padding: 30px 0;
margin-bottom: 8px;
text-align: center;
}
#dropZone.dragover {
background: #DCDCDC;
}
/**************************
* Style for image preview *
**************************/
img {
margin: 0 3px;
}
img:hover {
cursor: grab;
}
/*********************************************
* Style for model selection drop-down button *
*********************************************/
#buttonsArea {
margin: 0 15px 0 50px;
}
select {
color: #333;
display: block;
max-width: 100%;
border-radius: 3px;
height: auto !important;
border: 1px solid #e3e3e3;
line-height: 16px !important;
padding: 10px 70px 10px 13px !important;
background: #fff url("selectbox_arrow.png") right center no-repeat;
appearance: none; /* this is must */
-webkit-appearance: none;
-moz-appearance: none;
}
/*****************************************************************
* Style for single upload section that changes canvas background *
*****************************************************************/
#singleUploadSection {
color: #333;
width: 194px;
padding: 6px;
margin: 10px 0;
font-size: 13px;
text-align: center;
border-radius: 3px;
background-color: #fff;
}
/*******************
* Style for canvas *
*******************/
#background {
padding: 5px;
position: absolute;
background-color: #fff;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
.layer {
padding: 5px;
position: absolute;
background-color: #fff;
}/*
* This file is used for drag & drop file upload and image preview
*/
/************************************************************
* Add the JavaScript support for drag & drop/browse upload *
***********************************************************/
function makeDroppable(element, callback) {
var input = document.createElement('input');
input.setAttribute('type', 'file');
input.setAttribute('multiple', true);
input.style.display = 'none';
input.addEventListener('change', function (e) {
triggerCallback(e, callback);
});
element.appendChild(input);
element.addEventListener('dragover', function (e) {
e.preventDefault();
e.stopPropagation();
element.classList.add('dragover');
});
element.addEventListener('dragleave', function (e) {
e.preventDefault();
e.stopPropagation();
element.classList.remove('dragover');
});
element.addEventListener('drop', function (e) {
e.preventDefault();
e.stopPropagation();
element.classList.remove('dragover');
triggerCallback(e, callback);
});
element.addEventListener('click', function () {
input.value = null;
input.click();
});
}
function triggerCallback(e, callback) {
if (!callback || typeof callback !== 'function') {
return;
}
var files;
if (e.dataTransfer) {
files = e.dataTransfer.files;
} else if (e.target) {
files = e.target.files;
}
callback.call(null, files);
}
/*************************************************************************
* After drag & drop upload, create image elements and add image preview *
* Make images draggable to canvas and register mouse & drag events *
************************************************************************/
makeDroppable(document.querySelector('#dropZone'), function (files) {
var output = document.querySelector('#images_preview');
output.innerHTML = '';
for (var i = 0; i < files.length; i++) {
if (files[i].type.indexOf('image/') === 0) {
var reader = new FileReader();
reader.addEventListener("load", function () {
var image = new Image();
image.id = Math.random().toString(36).substr(2, 9); // Generate image ID
image.height = 80;
image.width = 80;
image.src = this.result;
image.ondragstart = function (e) { // Register drag event
e.dataTransfer.setData("text", e.target.id);
};
output.appendChild(image); // Add image preview to page
}, false);
reader.readAsDataURL(files[i]);
}
}
});
/*
* This file is used for interaction with the canvas element and initializations
*/
/*******************************************************
* Change canvas 1 background after image was selected *
******************************************************/
function setBackground() {
var file = $("#singleUpload")[0].files[0];
var canvas = document.getElementById("background");
var context = canvas.getContext("2d");
var reader = new FileReader();
reader.addEventListener("load", function () {
var backgroundImage = new Image();
backgroundImage.src = this.result;
backgroundImage.onload = function () {
context.drawImage(backgroundImage, 0, 0, 600, 600); // Draw and stretch
image to fill canvas
};
}, false);
reader.readAsDataURL(file);
}
/*************************************
* Global variables, initialisations *
************************************/
$("#singleUpload").val(""); // Reset background selection on page refresh
$("#modelSelect").val(""); // Reset model selection on page refresh
document.getElementById("background").style.visibility = "hidden"; // Hide canvas until model is selected
/**************************************
* Export canvas and download as imag *
*************************************/
var link = document.getElementById('btn-download');
link.addEventListener('click', function (e) {
var canvas = document.createElement('canvas');
var context = canvas.getContext("2d");
canvas.width = 605;
canvas.height = 605;
// We need to get all images droped on all canvases and combine them on above canvas
$('#photo').children('canvas').each(function () {
var image = this;
context.beginPath(); // Simulate CSS padding around images by drawing white
rectangles behind images on export
context.rect((image.offsetLeft - 480), (image.offsetTop - 76), image.width,
image.height);
context.fillStyle = "white";
context.fill();
context.drawImage(image, (image.offsetLeft - 480 + 5), (image.offsetTop - 76 + 5),
(image.width - 10), (image.height - 10)); // Draw image
});
link.href = canvas.toDataURL(); // Save all combined images to one image
link.download = "photo.png"; // Download the image
}, false);
/***************************************
* Change model after drop-down select *
**************************************/
function modelSelect() {
var background = document.getElementById("background"); // Keep background canvas
var photo = document.getElementById("photo");
while (photo.firstChild) { // Remove all child canvases
photo.removeChild(photo.firstChild);
}
photo.appendChild(background); // Attach background canvas back
var selectedModel = document.getElementById("modelSelect").value; // Get the selected
model value
switch (selectedModel) {
case "model1": // If model1 was selected, draw pattern using 3 new
canvas elements as layers on top of background canvas
document.getElementById("background").style.visibility = "visible"; // Make
background canvas visible
var layer1 = document.createElement('canvas'); // Create first square canvas
programmatically
layer1.className = "layer";
layer1.width = 200; // Set square canvas width
layer1.height = 200; // Set square canvas height
layer1.style.top = "130px"; // Position square canvas 130px from top
layer1.style.left = "540px"; // Position square canvas 540px from left
layer1.style.visibility = "visible";
var body = document.getElementById("photo");
body.appendChild(layer1); // Add first square canvas to photo element on page
registerEvents(layer1); // Add event listeners that help drag & drop on canvas
var layer2 = document.createElement('canvas'); // Same as above ... create
second square canvas.. etc
layer2.className = "layer";
layer2.width = 110;
layer2.height = 110;
layer2.style.top = "180px";
layer2.style.left = "840px";
layer2.style.visibility = "visible";
var body = document.getElementById("photo");
body.appendChild(layer2);
registerEvents(layer2);
var layer3 = document.createElement('canvas');
layer3.className = "layer";
layer3.width = 340;
layer3.height = 230;
layer3.style.top = "400px";
layer3.style.left = "670px";
layer3.style.visibility = "visible";
var body = document.getElementById("photo");
body.appendChild(layer3);
registerEvents(layer3);
break;
case "model2": // If model2 was selected, draw pattern using 2 new canvas elements
as layers on top of background canvas
document.getElementById("background").style.visibility = "visible";
var layer1 = document.createElement('canvas');
layer1.className = "layer";
layer1.width = 250;
layer1.height = 250;
layer1.style.top = "81px";
layer1.style.left = "485px";
layer1.style.visibility = "visible";
var body = document.getElementById("photo");
body.appendChild(layer1);
registerEvents(layer1);
var layer2 = document.createElement('canvas');
layer2.className = "layer";
layer2.width = 150;
layer2.height = 600;
layer2.style.top = "81px";
layer2.style.left = "785px";
layer2.style.visibility = "visible";
var body = document.getElementById("photo");
body.appendChild(layer2);
registerEvents(layer2);
break;
case "model3": // If model3 was selected, draw pattern using 2 new canvas elements
as layers on top of background canvas
document.getElementById("background").style.visibility = "visible";
var layer1 = document.createElement('canvas');
layer1.className = "layer";
layer1.width = 250;
layer1.height = 250;
layer1.style.top = "81px";
layer1.style.left = "485px";
layer1.style.visibility = "visible";
var body = document.getElementById("photo");
body.appendChild(layer1);
registerEvents(layer1);
var layer2 = document.createElement('canvas');
layer2.className = "layer";
layer2.width = 300;
layer2.height = 600;
layer2.style.top = "81px";
layer2.style.left = "785px";
layer2.style.visibility = "visible";
var body = document.getElementById("photo");
body.appendChild(layer2);
registerEvents(layer2);
break;
default:
document.getElementById("background").style.visibility = "hidden"; // Hide
canvas until model is selected
}
}
/**********************************************************
* Register drag & drop event listeners to canvas element *
*********************************************************/
function registerEvents(canvas) {
canvas.ondragenter = function () {
canvas.style.border = "dashed 2px #555"; // Change the canvas borders when hovering
};
canvas.ondragleave = function () {
canvas.style.border = "none"; // Reset canvas borders when hovering is not active
};
canvas.ondragover = function (e) {
e.preventDefault();
};
canvas.ondrop = function (e) {
e.preventDefault();
var id = e.dataTransfer.getData("text");
var dropImage = document.getElementById(id);
canvas.style.border = "none"; // Reset canvas borders after image drop
var context = canvas.getContext("2d");
context.drawImage(dropImage, 0, 0, canvas.width, canvas.height); // Draw and stretch image to fill canvas
};
}Next, are some screenshots of different photo collage options that are available using the three patterns:
This article has shown you how to create a photo collage with your own images using HTML5 and CSS3.
The original home of HTML tutorials. HTMLGoodies is a website dedicated to publishing tutorials that cover every aspect of being a web developer. We cover programming and web development tutorials on languages and technologies such as HTML, JavaScript, and CSS. In addition, our articles cover web frameworks like Angular and React.JS, as well as popular Content Management Systems (CMS) that include WordPress, Drupal, and Joomla. Website development platforms like Shopify, Squarespace, and Wix are also featured. Topics related to solid web design and Internet Marketing also find a home on HTMLGoodies, as we discuss UX/UI Design, Search Engine Optimization (SEO), and web dev best practices.
Property of TechnologyAdvice. © 2025 TechnologyAdvice. All Rights Reserved
Advertiser Disclosure: Some of the products that appear on this site are from companies from which TechnologyAdvice receives compensation. This compensation may impact how and where products appear on this site including, for example, the order in which they appear. TechnologyAdvice does not include all companies or all types of products available in the marketplace.
