toDataURL 不是一个函数

toDataURL not a function

本文关键字：一个 函数 toDataURL      更新时间：2023-09-26

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

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

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

TypeError: can.toDataURL is not a function

我在 ubuntu 上运行 Firefox 8。

getElementsByTagName返回

一个NodeList [docs]，而不是单个元素。

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

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

如果要获取每个画布的数据 URL，则必须循环访问列表。否则，为画布指定 ID 并使用 getElementById检索引用可能更方便。

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

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");

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

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

如果你使用 jquery 

var canvas = $('#myCanvasId'); 
var image = canvas[0].toDataURL('image/png');

如果你使用JavaScript

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

(已解决！我遇到了这个问题，我解决了它。首先，您应该检查是否已在 head 标签的脚本链接中包含 CDN HTML2CANVAS.js。为此，您应该将此脚本粘贴到您的 head 标签中，在 jquery CDN 之后：(将此脚本添加到您的头标签中(

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>

在这个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>
相关文章：