Question

I met this message of error while trying to save an image which has been generating using html2canvas.

So I wrote this code :

<div id"mycanvas">
    <div id="container" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
    <div id="container2" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
    <div id="container3" style="min-width: 400px; height: 400px; margin: 0 auto"></div>
</div>

 </page> 


<script type="text/javascript">
var canvas = document.getElementById("mycanvas");
var img    = canvas.toDataURL("image/png");
document.write('<img src="'+img+'"/>');
    </script>   

Even If the image rendered is in the cache and good generated using html2canvas I don’t know how to save it.

This code don’t seems to be wrong but it displays to me this message of error.

So I’m a bit lost.

Here are the errors messages:

Uncaught TypeError: Cannot call method 'toDataURL' of null export-graphic-stat_employee.php:241
html2canvas: Preload starts: finding background-images Core.js:18
html2canvas: Preload: Finding images Core.js:18
html2canvas: Preload: Done. Core.js:18
html2canvas: start: images: 0 / 0 (failed: 0) Core.js:18
Finished loading images: # 0 (failed: 0) Core.js:18
html2canvas: Renderer: Canvas renderer done - returning canvas obj Core.js:18
Screenshot created in 167 ms<br /> Core.js:18

Receive all my utmost respect.

Kind regards.

S.P.

Answer 1

You’re missing an equals sign here;

<div id"mycanvas">

…which means your…

document.getElementById("mycanvas");

will return null.

Calling null.toDataURL("image/png"); is what is giving you the error message.

EDIT: If you want to actually use toDataURL, that method only works on an actual canvas element and you’re trying to use it on a div. Instead, remove the id on the div and either add;

<canvas id="mycanvas" width="400" height="400" > </canvas>

or use the actual canvas id from the canvas generated by HTML2Canvas to have an actual canvas element to work with.