[英]toDataURL returns error “Uncaught TypeError: Cannot read property '0' of undefined ”
I'm new to javascript and am having an error. 我是javascript的新手,我遇到了错误。 I'm sure I am skipping some basic concept... sorry.
我确定我正在跳过一些基本概念...抱歉。
here is the problem. 这是问题所在。
I use on my html this code: 我用我的html这段代码:
<div>
<script type='text/javascript'>
var myCanvas = document.getElementsByTagName("canvas");
document.write('<img src="'+myCanvas[0].toDataURL("image/png")+'"/>');
</script></div>
I have only one canvas on my document. 我的文档上只有一个画布。 The error I see in chrome is:
我在chrome中看到的错误是:
Uncaught TypeError: Cannot read property '0' of undefined sankey.html:128 (anonymous function)
If I enter 如果我进入
document.write('<img src="'+myCanvas[0].toDataURL("image/png")+'"/>');
(the exact same line) in the java script chrome console, it works! (完全相同的一行)在java脚本chrome控制台中,它的工作原理! How is this possible?
这怎么可能?
You forgot the [0]
: 你忘了
[0]
:
var myCanvas = document.getElementsByTagName("canvas")[0];
getElementsByTagName
returns a array of elements, you'll have to select one out of it. getElementsByTagName
返回一个元素数组,你必须从中选择一个元素。 (Even if the array only contains 1 element) (即使数组只包含1个元素)
A "cleaner" way to do this would be to set a id ( id="myCanvas"
) on the canvas, and use getElementById
, but since you're only using 1 canvas, getElementsByTagName
will work. 执行此操作的“更干净”方法是在画布上设置id(
id="myCanvas"
),并使用getElementById
,但由于您只使用1个画布,因此getElementsByTagName
将起作用。
The reason it was returning undefined
is probably that your code was executed before the canvas was loaded. 它返回
undefined
的原因可能是你的代码是在加载画布之前执行的。
Wrap your code in a function, then register the function to the "load" event 将代码包装在函数中,然后将函数注册到“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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.