Question

toDataURL 返回错误“未捕获的类型错误：无法读取未定义的属性‘0’”

2012-11-29

8459

javascript

我是 javascript 新手，遇到了错误。我肯定我跳过了一些基本概念……抱歉。

问题就在这里。

我在 html 上使用此代码：

<div>
<script type='text/javascript'>
var myCanvas = document.getElementsByTagName("canvas");
document.write('<img src="'+myCanvas[0].toDataURL("image/png")+'"/>');

</script></div>

我的文档上只有一个画布。我在 chrome 中看到的错误是：

Uncaught TypeError: Cannot read property '0' of undefined sankey.html:128 (anonymous function)

如果我在 java script chrome 控制台中输入

document.write('<img src="'+myCanvas[0].toDataURL("image/png")+'"/>');

（完全相同的行），它就可以正常工作！这怎么可能呢？

Answer 1

您忘记了 [0] ：

var myCanvas = document.getElementsByTagName("canvas")[0];

getElementsByTagName 返回一个元素数组，您必须从中选择一个。（即使数组只包含 1 个元素）

执行此操作的“更干净”方法是在画布上设置一个 id ( id="myCanvas" )，并使用 getElementById ，但由于您只使用 1 个画布， getElementsByTagName 将起作用。

它返回 undefined 的原因可能是您的代码是在画布加载之前执行的。
将您的代码包装在一个函数中，然后将该函数注册到“load”事件

<script type='text/javascript'>
    var myCanvas;

    function initCanvas(){
        myCanvas = document.getElementsByTagName("canvas");
        document.write('<img src="'+myCanvas[0].toDataURL("image/png")+'"/>');
    }

    window.addEventListener('load', initCanvas, false);
</script>