未捕获的类型错误：无法调用方法'toDataURL'null

Question

在尝试保存使用html2canvas生成的图像时，遇到此错误消息。

所以我写了这个代码：

<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> 

即使呈现的图像是在缓存和良好的使用html2canvas产生的，我不知道如何保存它。

此代码似乎并不是错误的，但它显示给我这个错误信息。

所以我有点失落。

这里是错误的消息：

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 

得到各界最崇高的敬意。

亲切的问候。

S.P.

Answer 1

您在这里丢失了等号;

<div id"mycanvas"> 

...这意味着你...

document.getElementById("mycanvas"); 

将返回null。

调用null.toDataURL("image/png");是什么给你的错误信息。

编辑：如果你想实际使用toDataURL，该方法只适用于一个实际的画布元素，而你试图在div上使用它。相反，请删除div上的ID并添加;

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

，或者使用从由HTML2Canvas生成的画布的画布实际id来有一个实际的画布元件一起工作。