toDataURL返回错误“未捕获TypeError：无法读取属性'0'未定义”

我是新来javascript，并有一个错误。我确信我跳过一些基本概念......对不起。toDataURL返回错误“未捕获TypeError：无法读取属性'0'未定义”

这里是问题所在。

我在我的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脚本铬控制台输入

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

（确切的同一行），它的工作原理！这怎么可能？

来源

2012-11-29 otmezger

没有看到更多的代码，一个可能的原因可能是你的JavaScript的HTML文件中的canvas元素之前。这会导致您的脚本在您的canvas元素存在之前运行。之后，当您使用控制台时，它确实存在，您的代码可以工作。 – Willem

你忘了[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>

来源

2012-11-29 10:53:18 Cerbrus

谢谢，我使用myCanvas [0]来访问下面一行中的第一个元素...是不是这样？ – otmezger

是的，但是，如果要将canvas元素分配给变量，通常更方便的获取实际元素，而不是包含该元素的数组。因此'getElement'后面的'[0]'，而不是'myCanvas' – Cerbrus

后面我只是试过了你的想法，它在同一个地方返回相同的错误:-(其他想法？ – otmezger

toDataURL返回错误“未捕获TypeError：无法读取属性'0'未定义”

回答

相关问题