Javascript Html2Canvas.js Example to Capture Screenshot of Editable TextArea as PNG Image in Browser

Welcome folks today in this blog post we will be exporting or capturing the screenshot of editable textarea widget using html2canvas.js library in bootstrap4 and javascript. All the full source code of the application is given below.

Get Started

Now first of all we will create the index.html file which will contain the button and editable textarea widget where the user will write the text and also some custom css will also get applied to the textarea which will be exported as PNG image using html2canvas.js library

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.1/css/bootstrap.css">
<style>
    @import url('https://fonts.googleapis.com/css?family=Noto+Sans:400,700');

#capture{
  margin: 0 auto;
  width: 100%;
  height: 400px;
  overflow: hidden;
}

textarea{
  width: 100%;
  padding: 2rem .5rem;
  background: transparent;
  border: 0;
  text-align: center;
  color: #fff;
  font-family: 'Noto Sans', sans-serif;
  font-weight: 700;
  font-size: 2rem;
  resize: none;
  overflow: hidden;
  max-height: 100%;
  min-height: 100%;
}
</style>
<body>
    <div class="container">
        <div class="row">
          <div class="col-8 offset-2">
                  <!-- Btn to trigger action -->
                  <a href="#" class="btn btn-block btn-primary mb-3" id="btnDownload">Download</a>
      
            <!-- Content to capture -->
            <div id="capture" class="text-center bg-info align-middle">
              <textarea maxlength="110">Click to edit...</textarea>
            </div>
          </div>
        </div>
      </div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.5.0-beta4/html2canvas.js"></script>
</html>

<!DOCTYPE html>

<head>

<title>Document</title>

</head>

<style>

@import url('https://fonts.googleapis.com/css?family=Noto+Sans:400,700');

#capture{

margin: 0 auto;

width: 100%;

height: 400px;

overflow: hidden;

}

textarea{

width: 100%;

padding: 2rem .5rem;

background: transparent;

border: 0;

text-align: center;

color: #fff;

font-family: 'Noto Sans', sans-serif;

font-weight: 700;

font-size: 2rem;

resize: none;

overflow: hidden;

max-height: 100%;

min-height: 100%;

}

</style>

<body>

<a href="#" class="btn btn-block btn-primary mb-3" id="btnDownload">Download</a>

<textarea maxlength="110">Click to edit...</textarea>

</div>

</body>

</html>

So here you can see the bootstrap 4 button and editable textarea widget where the user can write something and after this we need to write the javascript code so that when we click the button we need to export the canvas to blob and download it as image file

    function download(url){
  var a = $("<a style='display:none' id='js-downloder'>")
  .attr("href", url)
  .attr("download", "test.png")
  .appendTo("body");

  a[0].click();

  a.remove();
}

function saveCapture(element) {
  html2canvas(element).then(function(canvas) {
    download(canvas.toDataURL("image/png"));
  })
}

$('#btnDownload').click(function(){
  var element = document.querySelector("#capture");
  saveCapture(element)
})

function download(url){

var a = $("<a style='display:none' id='js-downloder'>")

.attr("href", url)

.attr("download", "test.png")

.appendTo("body");

a[0].click();

a.remove();

}

function saveCapture(element) {

html2canvas(element).then(function(canvas) {

download(canvas.toDataURL("image/png"));

})

}

$('#btnDownload').click(function(){

var element = document.querySelector("#capture");

saveCapture(element)

})

Here you can see that guys we have first of all targeted the element by its id and then we passed it to a custom function and inside that function we are calling the `html2canvas method where we are passing the element and then returns the promise and inside the response we got the actual canvas.

And then we are using the canvas.toDataURL() method to actually convert the canvas to an image and download it as attachment in browser.