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

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 来使用实际的画布元素。