Skip to content

WebNinjaDeveloper.com

Programming Tutorials




Menu
  • Home
  • Youtube Channel
  • Official Blog
  • Nearby Places Finder
  • Direction Route Finder
  • Distance & Time Calculator
Menu

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

Posted on October 2, 2022

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

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<!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>

 

 

 

 

 

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

 

 

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
    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.

 

Recent Posts

  • Node.js Express Passwordless Login Example to Send Magic Auth Link Using Nodemailer
  • Python 3 Tkinter Script to Encrypt PDF Documents With Password Using PyPDF2 Library GUI Desktop App
  • Node.js Express Project to Upload Image Buffer & BLOB Data to MongoDB Database & Display it in Browser Using Javascript
  • Node.js Tutorial to Export Images to PDF Document With Effects Using FilePix Library in Javascript
  • Node.js Tutorial to Export All Pages of PDF Document to Images and Save it in Javascript
  • Angular
  • Bunjs
  • C#
  • Deno
  • django
  • Electronjs
  • java
  • javascript
  • Koajs
  • kotlin
  • Laravel
  • meteorjs
  • Nestjs
  • Nextjs
  • Nodejs
  • PHP
  • Python
  • React
  • ReactNative
  • Svelte
  • Tutorials
  • Vuejs




©2023 WebNinjaDeveloper.com | Design: Newspaperly WordPress Theme