How to make a collage using Javascript: Part 1 (Starter files)
Tags: javascript, canvas, project
Published: 2021-02-07 13:13:49

Google defines collage as the following: <br/>
> a piece of art made by sticking various different materials such as photographs and pieces of paper or fabric on to a backing.

As you already know there are applications for making a collage like `photogrid` and `pizap` among many but I find it fun just to make things on my own and improve my experience as a self-taught web developer. It will contain just basic templates but you can add more features if you want.
I will use vanilla javascript on this project the main project I made it using typescript. You can find the complete project source code on [this repository](https://github.com/CoulKe/collage-maker). The Javascript files are in the `dist` folder while the typescript files are in the `src` folder.

Let's begin with the setup..
Create an `index.html` file and paste the following code:
```html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Collage maker</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
<!-- Will display if Javascript is turned off -->
    <noscript>
        <div id="no-js">
            <p>You need to enable Javascript to use this site</p>
        </div>
    </noscript>
    <div class="container">
        <h1>Choose template</h1>
        <div id="templates">
            <div class="template template-1">
                <div id="t-in-1"></div>
            </div>
            <a class="choose">Choose this <img src="./pointer.svg" alt="up arrow" class="pointer"></a>
            <div class="template template-2">
                <div id="t-in-2"></div>
            </div>
            <a class="choose">Choose this <img src="./pointer.svg" alt="up arrow" class="pointer"></a>
            <div class="template template-3">
                <div id="t-in-3"></div>
            </div>
            <a class="choose">Choose this <img src="./pointer.svg" alt="up arrow" class="pointer"></a>
        </div>
    </div>
    <footer>
        <p>Made with ❤ by <a id="git-link" href="https://github.com/coulKe">Luteya Coulston</a></p>
    </footer>

</body>

</html>

</html>
```
The above code contains the current only 3 templates available for making a collage. The svg images can be download in the git repository but it's only for decoration really not a must.
Then create an `upload.html` file with the following code:

```html
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Upload - Collage maker</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>
<!-- Will display if Javascript is turned off -->
    <noscript>
        <div id="no-js">
            <p>You need to enable Javascript to use this site</p>
        </div>
    </noscript>
    <div class="container">
        <div id="upload-view">
            <form>
                <label for="files">Upload photos:</label> <br>
                <input type="file" id="files" multiple> //Note the multiple attribute
            </form>
            <a href="" id="previewButton">Preview</a>
            <a href="" id="downloadButton">Download Collage</a>
            <canvas id="preview" width="275px" height="275px"></canvas>
            <canvas id="cvns" width="550px" height="550px"></canvas>
        </div>
        <div id="hidden-images"></div>
        <a id="hidden-link" href="#" hidden></a>
    </div>
</body>

</html>
```
It's just a basic html file with an input file, some links and two canvases. The first canvas with the id of `preview` will be used is smaller in size and will be used to preview the collage after files are uploaded while the second canvas with the id of `cvns` will be used to generate the image that will be downloaded as we'll see later on.
We'll then create a `style.css` file to style our html file, it's not the best of design but we'll with it 😁

```css
* {
    box-sizing: border-box;
  }
  #no-js {
    text-align: center;
    padding: 1rem;
    font-weight: bold;
    font-size: large;
    color: #ffffff;
    background-color: rgb(85, 0, 0);
  }
  body {
    margin: 0px;
    font-family: Arial, Helvetica, sans-serif;
  }
  #git-link {
    color: #ffffff;
    text-decoration: none;
  }
  #git-link:hover {
    text-decoration: underline;
  }
  footer {
    text-align: center;
    font-weight: bold;
    padding: 0.5rem;
    color: #ffffff;
    background-color: #000000;
  }
  h1 {
    text-align: center;
  }
  .container {
    counter-reset: template;
  }
  #templates {
    text-align: center;
  }
  .choose,
  #previewButton,
  #downloadButton {
    text-decoration: none;
    display: inline-block;
    padding: 0.5rem;
    background-color: #000000;
    color: #ffffff;
    font-weight: bold;
    border-radius: 4px;
  }
  .choose {
    margin: 4px;
  }
  .pointer {
    width: 15px;
    height: 15px;
  }
  .template {
    position: relative;
    margin: auto;
    background-color: #f3f3ff;
    border: 1px solid grey;
    width: 250px;
    height: 250px;
    margin-bottom: 6px;
  }
  
  .template::before {
    content: counter(template) ")";
    counter-increment: template;
    position: absolute;
    font-weight: bold;
    top: 0;
    left: -25px;
  }
  
  #t-in-1 {
    border: 1px solid grey;
    background-color: inherit;
    width: 120px;
    height: 120px;
    position: absolute;
    bottom: 30px;
    right: 30px;
  }
  
  #t-in-2 {
    border-left: 1px solid grey;
    background-color: inherit;
    width: 125px;
    height: 100%;
    position: absolute;
    top: 0px;
    bottom: 0px;
    right: 0px;
  }
  
  #t-in-3 {
    border-bottom: 1px solid grey;
    background-color: inherit;
    width: 100%;
    height: 125px;
    position: absolute;
    top: 0px;
  }
  /*Upload page*/
  #upload-view {
    padding: 1rem;
    max-width: 800px;
    margin: auto;
    text-align: center;
  }
  #hidden-images,
  canvas {
    display: none;
  }
  canvas {
    margin: auto;
  }
  #img-1 {
    width: 50%;
    height: 100%;
    object-fit: cover;
  }
  #img-2 {
    width: 50%;
    height: 100%;
    object-fit: cover;
  }
  label {
    display: block;
    font-weight: bold;
    font-size: larger;
  }
  #previewButton,
  #downloadButton {
    margin: 8px;
  }
  
```
So far so good, the next part will deal with javascript because if I put it here it will be too long. See you on the other [side(part 2)](https://dev.to/coulke/how-to-make-a-collage-using-javascript-part-2-javascript-section-6k0).