javascript - toDataURL 返回错误 "Uncaught TypeError: Cannot read property ' 0' of undefined "

Question

我是 javascript 的新手，遇到了错误。我确定我正在跳过一些基本概念......抱歉。

问题来了。

我在我的 html 上使用了这段代码:

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

</script></div>

我的文档上只有一个 Canvas 。我在 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 个元素)

一种“更简洁”的方法是在 Canvas 上设置一个 id (id="myCanvas")，并使用 getElementById，但由于您如果仅使用 1 个 Canvas ，getElementsByTagName 将起作用。

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

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