SHOW:
|
|
- or go back to the newest paste.
| 1 | <head> | |
| 2 | - | <script src="cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script> |
| 2 | + | <script src="http://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script> |
| 3 | </head> | |
| 4 | <body> | |
| 5 | <div id='test'>Take My screenshot</div> | |
| 6 | <p>Some other part of html</p> | |
| 7 | - | |
| 7 | + | |
| 8 | <button onclick ="ScreenShot()">Click To Generate ScreenShot</button> | |
| 9 | <script> | |
| 10 | - | funtion ScreenShot(){
|
| 10 | + | function ScreenShot(){
|
| 11 | var element = document.getElementById('test');
| |
| 12 | html2canvas(element, {
| |
| 13 | onrendered: function(canvas) {
| |
| 14 | //rendered canvas | |
| 15 | var download = document.createElement('a')//creating link for downloading image
| |
| 16 | download.href =canvas.toDataURL();//use canvas.toDataURL('image/jpeg') for jpg file
| |
| 17 | download.download = true; | |
| 18 | download.text = 'Download'; | |
| 19 | - | document.appendChild(download); |
| 19 | + | document.body.appendChild(download); |
| 20 | ||
| 21 | } | |
| 22 | }); | |
| 23 | } | |
| 24 | </script> | |
| 25 | </body> |
