'dom-to-image.js not producing image

I am attempting to set up the function domtoimage.toPng from dom-to-image.js with a basic program and it is currently not working. dom-to-image.js is installed in the same folder as this program. I copied an online example that worked, but it is currently not displaying an image on my computer. I would appreciate your help.

<html>
  <head>
    <script>
      function screenshot() 
      {
        //document.writeln("Go!");
        domtoimage.toPng(document.body).then(function(img) 
        {
          document.body.appendChild(img);
        })
      }
    </script>
    <script type='text/javascript' src='dom-to-image.js'></script>
  </head>

  <body>
    <div id="my-node">
      <p>Some HTML content or images.</p>
    </div>

    <div id='id2'>
      Nothing changed
    </div>

    <button onclick="screenshot()">Take screenshot</button>
  </body>
</html>
javascripthtml


Solution 1:[1]

try this example

function screen(){
alert('ddd')
const render = node =>
  domtoimage.toPng(node)
  .then(dataUrl => {
  console.log(performance.now()-pf)
    const img = new Image();
    img.src = dataUrl;
    $('body').append(img);
  })
  .catch(error =>
    console.error('oops, something went wrong!', error)
  );

const foo = document.getElementById('foo');

var pf=performance.now();
render(foo);

}
<script src="https://cdn.rawgit.com/tsayen/dom-to-image/bfc00a6c5bba731027820199acd7b0a6e92149d8/dist/dom-to-image.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<div id="foo">
  <div >foo</div>
<button onclick="screen()">shot</button>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Ayoub Benayache

Related Questions