DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

Cover image for How to Capture an HTML Element
Kiril Delovski
Kiril Delovski

Posted on

How to Capture an HTML Element

In the following tutorial, you will learn how to make a "capturing πŸ“Έ of an HTML element by clicking on a button" and the 🎴 will be downloaded.

Let's Start πŸ‘€

To make this work we will use the open-source html2canvas library.

  • First, we need to include the library for capturing the element in the <head> tag of our html document
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js">
</script>

Enter fullscreen mode Exit fullscreen mode

(see the following code example)

<!DOCTYPE html>
<html>
 <head>
  <title>Capture an html element and save it as image</title>
  <script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js"> 
  </script>
 </head>
 <body>
 </body>
</html>
Enter fullscreen mode Exit fullscreen mode
  • Now, we will include the following <style> in our <head> tag, which is just styling for our example element that we are capturing
body {
    margin-top: 40px;
    font-family: Arial, Helvetica, sans-serif;
}

a:link:hover {
    text-decoration: none;
}

#capture-frame {
    width: 500px;
    margin: auto auto;
    display: flex;
    color: black;
    font-size: 16px;
    font-weight: bold;
    height: 300px;
    border: 4px solid black;
}

.screen-1 {
    background: red;
    width: 100%;
    text-align: center;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-right: 1px solid yellow;
}

.screen-1:hover, .screen-2:hover  {
    color: white;
}

.screen-2 {
    background: green;
    width: 100%;
    text-align: center;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

h3 {
    text-align: center;
    font-weight: bold;
    padding-bottom: 100px;
    text-transform: uppercase;
}

.button {
    margin: 0 auto;
    text-align: center;
    padding: 50px 0;
}

.button button {
    border: 1px solid black;
    padding: 6px;
    font-weight: bold;
    font-size: 14px;
    outline: none;
    cursor: pointer;
}

.button button:hover {
    background-color: lightblue;
}

Enter fullscreen mode Exit fullscreen mode
  • Next we are adding the html structure for the element inside body tag
<h3>Capturing html element example
    <br />by using the 
    <a href="https://html2canvas.hertzen.com/">
     html2canvas 
    </a>
    library
</h3>

<div class="button">
    <button type="button" 
     onclick="saveAsImage()">Capture
    </button>
</div>

<div id="capture-frame">
    <div class="screen-1"><span>Element 1 </span></div>
    <div class="screen-2"><span>Element 2 </span></div>
</div>
Enter fullscreen mode Exit fullscreen mode
  • At last, you will need to add the following script above the closing of <body/> tag
function saveAsImage() {
    const findEl = document.getElementById('capture-frame')
    html2canvas(findEl).then((canvas) => {
        const link = document.createElement('a')
        document.body.appendChild(link)
        link.download = "cmp-image.jpg"
        link.href = canvas.toDataURL()
        link.click()
        link.remove()
    })
}
Enter fullscreen mode Exit fullscreen mode

Final notes:

Β Β Β Β The current example is showing capturing of an HTML element by a button click but this can be customized by your needs for example (as event listener, based on some action, or interval).

To see the working example or visit the github repo .


For any questions or information about me you can reach out by scanning or clicking on the following qr code:



scan qr code to find more about me


The post was published first on Delovski.net Blog

Top comments (0)

Here is a post you might want to check out:

Regex for lazy developers

regex for lazy devs

Sorry for the callout πŸ˜†