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 puter. 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>
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 puter. 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>
- Have you checked the console in the browser to see if there are any error messages? If so, can you please post the error messages. – jwatts1980 Commented Nov 16, 2019 at 0:42
- The error says index.html:9 Uncaught (in promise) TypeError: Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'. at index.html:9 – CJ Conti Commented Nov 16, 2019 at 1:01
2 Answers
Reset to default 4try 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./tsayen/dom-to-image/bfc00a6c5bba731027820199acd7b0a6e92149d8/dist/dom-to-image.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/jquery/2.2.3/jquery.min.js"></script>
<div id="foo">
<div >foo</div>
<button onclick="screen()">shot</button>
</div>the code only captures the top left of the screen. endeavour to remove all margins attached to the div to be screenshot from your CSS. you are wele