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
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.