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

Question

我是 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)

如果我输入

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

（完全相同的行）在java script chrome控制台中，它可以工作！这怎么可能？

Answer 1

你忘记了[0]：

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

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

一种“更清洁”的方法是id="myCanvas"在画布上设置一个 id ( ) 并使用getElementById，但由于您只使用 1 个画布，getElementsByTagName因此可以使用。

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

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