How to Capture an HTML Element
Tags: html, javascript, css, web
Published: 2020-09-28 13:39:45

In the following tutorial, you will learn how to make a <b>"capturing &#128248; of an HTML element by clicking on a button"</b> and the  &#127924; will be downloaded.


<h1>Let's Start 👀</h1>

To make this work we will use the open-source <a href="https://html2canvas.hertzen.com/"><b>html2canvas</b></a> library.

- First, we need to include the library for capturing the element in the ```<head>``` tag of our html document <br>

```javascript
<script src="https://html2canvas.hertzen.com/dist/html2canvas.min.js">
</script>

```

<small>(see the following code example)</small>

```html
<!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>
```


- Now, we will include the following ``` <style> ``` in our ``` <head> ``` tag, which is just styling for our example element that we are capturing

```css
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;
}

```


- Next we are adding the html structure for the element inside ``` body ``` tag
```html
<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>
```

- At last, you will need to add the following script above the closing of ``` <body/> ``` tag

```javascript
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()
    })
}
```

<h1>Final notes:</h1>
&nbsp;&nbsp;&nbsp;&nbsp;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 <a alt="see the working example" href="https://github.com/kiril6/captureAnyHtmlElement"><b>example</b> </a>or visit the <a alt="visit the github repo" href="https://github.com/kiril6/captureAnyHtmlElement"><b>github repo</b> </a>.


<hr>
<p><i><b> For any questions or information about me you can reach out by scanning or clicking on the following qr code:</b></i></p>
<br>
<a href="http://delovski.net/qr" alt="find more about me"><img src="https://dev-to-uploads.s3.amazonaws.com/i/xtl2ad51u4zxctqvq8e2.PNG" alt="scan qr code to find more about me"/></a><br><br>
<small>The post was published first on <a href="http://delovski.net/initio/blog-post-4.html" alt="original blog post link">Delovski.net Blog</a></small>