toDataURL不是一个函数

Question

我正在尝试为画布生成一个URL.以下是我遵循的步骤:

var can = document.getElementsByTagName("canvas");
var src = can.toDataURL("image/png");

当我尝试在firebug上运行上面的代码时,它会抛出一个错误:

TypeError: can.toDataURL is not a function

我在ubuntu上运行firefox 8.

Answer 1

getElementsByTagName返回^[docs],而不是单个元素.NodeList

只需访问列表的第一个元素:

var src = can[0].toDataURL("image/png");

如果要获取每个画布的数据URL,则必须遍历列表.否则,为画布提供ID并检索引用getElementById可能更方便.

Answer 2

接受的答案中未提及的内容：即使使用 ID 选择器，jQuery 的 Sizzle 也会返回一个对象/集合。因此，如果您在使用 jQuery 时遇到此错误，请使用[0]附件访问元素的第一个索引。如果您好奇，可以使用以下方法探索索引console.dir($('#canvasId));

例如，这个完全正常的选择器会失败：

var src = $('#canvasId').toDataURL("image/png");

但是这个会起作用（注意额外的括号）：

var src = ($('#canvasId')[0]).toDataURL("image/png");

Answer 3

var can = document.getElementsByTagName("canvas"); 

这将返回一个canvas元素数组.你需要通过id获取画布.

var can = document.getElementById("canvasId"); 

Answer 4

仔细检查您正在运行的toDataURL()是画布对象本身，而不是上下文对象。