Javascript toDataURL不是一个函数_Javascript_Dom_Canvas

Javascript toDataURL不是一个函数

javascript dom canvas

Javascript toDataURL不是一个函数,javascript,dom,canvas,Javascript,Dom,Canvas,我正在尝试为画布生成url。以下是我遵循的步骤： var can = document.getElementsByTagName("canvas"); var src = can.toDataURL("image/png"); 当我尝试在firebug上运行上述代码时，它抛出了一个错误： TypeError: can.toDataURL is not a function 我正在ubuntu上运行Firefox8。getElementsByTagName返回一个，而不是一个元素只需访问列表

我正在尝试为画布生成url。以下是我遵循的步骤：

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

当我尝试在firebug上运行上述代码时，它抛出了一个错误：

TypeError: can.toDataURL is not a function

我正在ubuntu上运行Firefox8。

getElementsByTagName

返回一个，而不是一个元素

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

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

如果要获取每个画布的数据URL，则必须迭代列表。否则，为画布提供一个ID并使用

getElementById

检索引用可能更方便

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

这将返回画布元素的数组。您需要通过id获取画布

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

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

在接受的答案中没有提到的东西：即使使用ID选择器，jQuery的Sizzle也会返回一个对象/集合。因此，如果在使用jQuery时出现此错误，请使用

[0]

附件访问元素的第一个索引。如果您感到好奇，可以使用

console.dir（$（'#canvasId））
例如，此完全正常的选择器将失败：
var src = $('#canvasId').toDataURL("image/png");

但是这一个会起作用（注意额外的括号）：
（解决了！）
我遇到了这个问题&我解决了它。首先，您应该检查是否已将CDN HTML2CANVAS.js包含在head标记的脚本链接中。要做到这一点，您应该在jquery CDN之后的head标记中粘贴此脚本：
（将下面的脚本添加到您的头标签中）


在这个CDN中，已经定义了函数“toDataURL”&如果您转到这个链接并在这个脚本页面上搜索（使用CTRL+F），您可以找到toDataURL函数。（已在本CDN中定义）
现在，我的头标签如下所示，它起作用了：
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
</head>

此代码有助于捕获画布图像并从视频下载
capture() {

  var video = document.getElementById('video');
  var canvas = $('#canvas');
  canvas.attr('width', 300);
  canvas.attr('height', 300);
  canvas[0].getContext('2d').drawImage(video, 0, 0, canvas.width(), canvas.height());
  console.log(canvas);
  var download = document.getElementById("download");
  var image = canvas[0].toDataURL("image/png");
  download.setAttribute("href", image);
}

<video id="video" width="300">
        <source src="videoURL" type="video/mp4">
    </video>

<a class="cmd-txt tar" href="" id="download" download="download.png">
  <img id="capture" src="src/assets/images/download_black.png" (click)="capture();" class="cursor-pointer" alt="download video image">
</a>

<canvas id="canvas">

</canvas>


capture（）{
var video=document.getElementById（'video'）；
var canvas=$（“#canvas”）；
canvas.attr（'width'，300）；
canvas.attr（'height'，300）；
画布[0].getContext（'2d'）.drawImage（视频，0，0，canvas.width（），canvas.height（））；
console.log（canvas）；
var download=document.getElementById（“下载”）；
var image=canvas[0].toDataURL（“image/png”）；
下载.setAttribute（“href”，图像）；
}
如果使用jquery
var canvas = $('#myCanvasId'); 
var image = canvas[0].toDataURL('image/png');

如果使用javascript
var canvas = document.getElementById('myCanvasId');
var image = canvas.toDataURL();

请解释一下你在做什么，这段代码可能会解决这个问题，这段代码如何解决这个问题以及为什么解决这个问题会真正有助于提高你的文章质量，并可能导致更多的投票。请记住，你是在将来回答读者的问题，而不仅仅是现在提问的人。请您的答案添加解释，并说明适用的限制和假设。在问题中，他给出了“var src=can.toDataURL（“image/png”）；”然后他得到了一个错误，因为他没有从画布获取数据URL。在我的回答中，我使用了dataURL。我还提供了下载功能。。
var canvas = $('#myCanvasId'); 
var image = canvas[0].toDataURL('image/png');

var canvas = document.getElementById('myCanvasId');
var image = canvas.toDataURL();