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会返回NodeList ^[docs]，而不是单个元素。

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

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

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

Answer 2

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

返回一个canvas元素数组。你需要通过id获得画布。

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

Answer 3

仔细检查您正在运行画布对象本身for /f "delims=" %%F in ('where java') do set var=%%F ECHO %var%，而不是上下文对象。

Answer 4

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

来探索索引

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

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

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

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

Answer 5

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

<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>

Answer 6

此代码有助于捕获画布图像并从视频下载。

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>

Answer 7

如果你使用 jquery

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

如果您使用 javascript

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

toDataURL不是一个函数

7 个答案: