Advertisement
Guest User

Untitled

a guest
Feb 21st, 2017
73
0
Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 0.89 KB | None | 0 0
  1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4.  
  5. <title>DOM to img test</title>
  6. <!-- https://github.com/tsayen/dom-to-image -->
  7.  
  8. <script src="dom-to-image.min.js"></script>
  9.  
  10. <style>
  11.   #test {width:20em;background:yellow;padding:.5em;}
  12.   h1 {color:red;font-family:"Comic Sans MS";}
  13.   p {color:blue;}
  14.   b {background:white;}
  15. </style>
  16.  
  17. </head>
  18. <body>
  19.  
  20. <div id="test">
  21.   <h1>Test!</h1>
  22.   <p>Just a <b>small</b> test</p>
  23.   <input type="text" value="Foo" onchange="makeImg();">
  24. </div>
  25.  
  26. <h4>Result:</h4>
  27.  
  28. <script>
  29. var node = document.getElementById('test');
  30.  
  31. function makeImg() {
  32.   domtoimage.toPng(node)
  33.     .then(function (dataUrl) {
  34.         var img = new Image();
  35.         img.src = dataUrl;
  36.         document.body.appendChild(img);
  37.     })
  38.     .catch(function (error) {
  39.         console.error('oops, something went wrong!', error);
  40.     });
  41. }
  42. makeImg();
  43. </script>
  44.  
  45. </body>
  46. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement