TheLazy.Dev
Portfolio GitHub

Blog

html |css |javascript |webdev

How to download HTML element as a image. Visiting card designer

themodernweb

Modern Web

Posted on September 7, 2021

How to download HTML element as a image. Visiting card designer

Hello, In today's article you'll learn to create awesome visiting card designer. Where you can add company logo, its slogan, website link and support email. You can also change the visiting card's background. And the best thing you can also download the designed visiting card on your system.

To see demo or you want full coding tutorial video for better understanding. You can watch the tutorial below.

Video Tutorial

I appreciate if you can support me by subscribing my youtube channel.

Code

For this project, we have 3 files. index.html, style.css and app.js.

So, start with HTML basic structure, link style.css and app.js file to it. After that, make an h1 element for heading.

<h1 class="heading">design your <span>visiting card</span></h1>
Enter fullscreen mode Exit fullscreen mode 
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body{
    width: 100%;
    height: 100vh;
    background: #f6f6f6;
    font-family: 'roboto', sans-serif;
    padding: 50px;
}

.heading{
    text-align: center;
    text-transform: capitalize;
    font-size: 70px;
    font-weight: 400;
    margin-bottom: 5vh;
}

.heading span{
    color: #467aff;
}
Enter fullscreen mode Exit fullscreen mode
Output

Capture

Now, make a div element which will contain our card on left side and design options on right side. Make a div for card element also.

<div class="main">
    <div class="card">

    </div>
</div>
Enter fullscreen mode Exit fullscreen mode 
.main{
    display: flex;
    padding: 50px;
    flex-wrap: wrap;
}

.card{
    width: 45%;
    margin-right: 5%;
    min-width: 500px;
    height: 300px;
    background: #fff;
    position: relative;
    border-radius: 5px;
    padding: 20px;
    background-image: url(img/img1.png);
    background-size: cover;
    overflow: hidden;
}

.card::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #000;
    opacity: 0.2;
}
Enter fullscreen mode Exit fullscreen mode
Output

Capture2

Now make a logo container inside card element.

<div class="logo"></div>
Enter fullscreen mode Exit fullscreen mode 
.logo{
    position: relative;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    display: block;
    margin: 5px auto;
    background-image: url('img/logo.png');
    background-size: cover;
}
Enter fullscreen mode Exit fullscreen mode

Now of course name some inputs inside card element.

<input type="text" class="name" maxlength="30" placeholder="business name">
<input type="text" class="slogan" maxlength="50" placeholder="business slogan">

<input type="text" class="website-link" placeholder="website">
<input type="text" class="email" placeholder="email">
Enter fullscreen mode Exit fullscreen mode 
input{
    position: relative;
    text-align: center;
    outline: none;
    font-weight: 500;
    margin-top: 20px;
    margin-bottom: 10px;
    background: none;
    width: 100%;
    border: none;
    font-size: 30px;
    color: #fff;
    transition: .5s;
}

::placeholder{
    text-transform: capitalize;
    color: #fff;
}

.slogan{
    font-size: 20px;
    margin: 5px 0;
}

input:focus{
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
}

.website-link, .email{
    font-size: 16px;
    opacity: .75;
    position: absolute;
    text-align: left;
    width: 50%;
    height: auto;
    bottom: 10px;
}

.website-link{
    left: 20px;
}

.email{
    right: 20px;
    text-align: right;
}
Enter fullscreen mode Exit fullscreen mode
Output

Capture4

Great! we are done with card designing. Now if you want you can quickly type the details on the input box. Let's make options now on the right side.

<!-- settings -->
<div class="setting">
    <input type="file" accept="*image" id="upload" hidden>
    <label for="upload" class="btn upload">upload logo</label>
</div>
Enter fullscreen mode Exit fullscreen mode

In above code, I just made a single div element inside main element. And inside this setting element. I made an upload input. hidden attribute is used to hide an input.

.setting{
    width: 50%;
}

.btn{
    font-size: 16px;
    text-transform: capitalize;
    padding: 10px 20px;
    border-radius: 5px;
    background: #fff;
    border: none;
    outline: none;
    cursor: pointer;
}

.btn:focus, .btn:hover{
    background-color: rgba(0, 0, 0, 0.1);
}
Enter fullscreen mode Exit fullscreen mode
Output

Capture5

Now make background images of course.

<!-- backgrounds -->
<div class="backgrounds">
    <img src="img/img1.png" class="active" alt="">
    <img src="img/img2.png" alt="">
    <img src="img/img3.png" alt="">
    <img src="img/img4.png" alt="">
    <img src="img/img5.png" alt="">
    <img src="img/img6.png" alt="">
</div>
Enter fullscreen mode Exit fullscreen mode 
.backgrounds{
    width: 100%;
    height: auto;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-gap: 10px;
    padding: 10px;
    background: rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    margin: 20px 0;
}

.backgrounds img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
    transition: .5s;
    border: 0;
    cursor: pointer;
}

.backgrounds img:hover{
    opacity: 0.5;
}

.backgrounds img.active{
    border: 5px solid #fff;
}
Enter fullscreen mode Exit fullscreen mode
Output

Capture6

Now we are done with our styles. Now just create a button for download. And also make an anchor link but don;t give any text to it.

<a href="#" id="link" download="visiting card.png"></a>
<button class="btn download-btn">download design</button>
Enter fullscreen mode Exit fullscreen mode

The above code is inside .setting element.

download attribute is used to set up a download link. And the value of download attribute is the filename for the downloaded image. We'll use the link element for download.

Output

Capture7

Now let's quickly write some JS. Open app.js file. Make sure to import it in index file.

First let's make logo upload functional. Select the upload input and logo element.

// setting up logo
const uploadBtn = document.querySelector('#upload');
const logo = document.querySelector('.logo');
Enter fullscreen mode Exit fullscreen mode

Then add change event to upload input.

uploadBtn.addEventListener('change', () => {
    if(uploadBtn.files && uploadBtn.files[0]){
        let reader = new FileReader(); // init the file reader

        reader.addEventListener('load', () => {
            // reader.result will return the src of the uploaded image
            logo.style.backgroundImage = `url('${reader.result}')`;
        })

        reader.readAsDataURL(uploadBtn.files[0]);
    }
})
Enter fullscreen mode Exit fullscreen mode

Inside the change event.
if(uploadBtn.files && uploadBtn.files[0]) This line checking for the uploaded file existence. This condition will only be true when a file is uploaded.
Then after we got the file, we need a file reader to read that image file. So for that we are using this. let reader = new FileReader(); After initializing the reader, add load event to it, and change the logo element's background there.

reader.addEventListener('load', () => {
            // reader.result will return the src of the uploaded image
            logo.style.backgroundImage = `url('${reader.result}')`;
        })
Enter fullscreen mode Exit fullscreen mode

And at very last, reader.readAsDataURL(uploadBtn.files[0]); this line is telling which the reader has to read. In this case we want the first uploaded file in our files array.

Great! the upload logo is working. Now, we have to allow user to change card's background. Select all background's image element. and card elements also.

const bgs = document.querySelectorAll('.backgrounds img');
const card = document.querySelector('.card');
let activeBg = 0; //default background
Enter fullscreen mode Exit fullscreen mode

activeBg will store the current selected background index. Because of this, we can to perform less for loops to achieve the result.

Now use forEach to loop through bgs and add click event to all the images. Inside that change toggle the active class, and change the activeBg value.

bgs.forEach((item, i) => {
    item.addEventListener('click', () => {
        bgs[activeBg].classList.remove('active');
        item.classList.add('active');
        card.style.backgroundImage = `url('${item.src}')`;
        activeBg = i;
    })
})
Enter fullscreen mode Exit fullscreen mode

Now the last thing, we have to make download functional. For this we'll use html2canvas library. This library will help us in converting the HTML elements into a canvas. And after that we can download the canvas.

Don't forget to add html2canvas CDN inside index file.

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.min.js"></script>
Enter fullscreen mode Exit fullscreen mode

Add this before app.js script.

Now, select download button in app.js. And make a functionexportCard which will export the card. And call the exportCard function when clicking download button.

// download button
let downloadBtn = document.querySelector('.download-btn');

let exportCard = () => {

}

downloadBtn.addEventListener('click', () => {
    exportCard();
})
Enter fullscreen mode Exit fullscreen mode

Now code inside exportCard.

let exportCard = () => {
    html2canvas(card)
    .then(canvas => {
        let link = document.getElementById('link');
        link.href = canvas.toDataURL();
        link.click(); // click on the link
    })
}
Enter fullscreen mode Exit fullscreen mode

html2canvas is the library method. Which covert the element into a canvas. The first argument for this method is element. In this case I have passed the card element. After that get the canvas using then method. And inside this, select the link element that we have made in HTML file. Set its href to canvas.toDataURL()(this will return the src/link of the canvas). And at last click on the link by calling link.click().

If you run the site and try to download you probably see this error in your console.

Error

Capture8

Well, this error is only coming because the browser is stopping you from converting the canvas into a link. Because you can't access local files on users system. If you host this site, then you'll not see the error. But in video tutorial, I made a node server to run this on localhost. So let's make a server now.

  1. Run npm init command in you terminal to initialize node app.

  2. Then run npm i express.js nodemon to install epxress and nodemon library.

  3. Now make some changes in your package.json. Change the main to server.js. And change the scripts.

"main": "server.js",
"scripts": {
    "start": "nodemon server.js"
  },
Enter fullscreen mode Exit fullscreen mode
  1. Now create server.js file in your directory. And code the server.
Server.js 
const express = require('express');

const app = express();
app.use(express.static(__dirname));

app.get('/', (req, res) => {
    res.sendFile('index.html');
})

app.listen(3000, () => {
    console.log('listening......')
})
Enter fullscreen mode Exit fullscreen mode

Start your server by running npm start command in terminal.

Great! Now the site is running on localhost. And you are now able to download the design. That's it for today guys. I hope you understood each and everything. If you have doubt or I missed something let me know in the comments.

Articles you may find Useful

  1. Best CSS Effect
  2. Infinte CSS loader
  3. Disney+ Clone
  4. Youtube API - Youtube Clone
  5. TMDB - Netflix Clone

I really appreciate if you can subscribe my youtube channel. I create awesome web contents.

Source Code

Your donation really motivates me to do more amazing tutorials like this. Support me on patreon, Buy me a coffee, Donate me on paypal

Thanks For reading.

💖 💪 🙅 🚩
themodernweb
Modern Web

Posted on September 7, 2021

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

HTML & CSS: The Underrated Skills That Made Learning JavaScript Easier
html HTML & CSS: The Underrated Skills That Made Learning JavaScript Easier

November 25, 2024

Deploying Your First Full-Stack Application with Vercel and Heroku
html Deploying Your First Full-Stack Application with Vercel and Heroku

November 21, 2024

Contact us page in HTML and CSS
html Contact us page in HTML and CSS

November 7, 2024

Modern HTML5 Boilerplate
html Modern HTML5 Boilerplate

November 2, 2024

Social Media Icons with Hover Effects Using HTML and CSS
html Social Media Icons with Hover Effects Using HTML and CSS

September 24, 2024