toDataURL 不是函数
[英]toDataURL not a function
问题描述
I am trying to generate a url for the canvas.
我正在尝试为画布生成一个 url。 Here are the steps I followed:以下是我遵循的步骤：
var can = document.getElementsByTagName("canvas");
var src = can.toDataURL("image/png");
When I tried running the above code on firebug it throws an error :当我尝试在 firebug 上运行上面的代码时，它会引发错误：
TypeError: can.toDataURL is not a function
I am running firefox 8 on ubuntu.我在 ubuntu 上运行 Firefox 8。
7 个解决方案
解决方案1
46 已采纳 2011-12-29 11:49:07
getElementsByTagName returns a NodeList [docs] , not a single element. getElementsByTagName返回一个NodeList [docs] ，而不是单个元素。
Simply access the first element of the list:只需访问列表的第一个元素：
var src = can[0].toDataURL("image/png");
If you want to get the data URL for each canvas, then you have to iterate over the list.如果要获取每个画布的数据 URL，则必须遍历列表。 Otherwise, giving the canvas an ID and retrieving the reference with getElementById might be more convenient.否则，给画布一个 ID 并使用getElementById检索引用可能更方便。
解决方案2
8 2016-01-22 11:32:40
仔细检查您正在运行toDataURL()画布对象本身，而不是上下文对象。
解决方案3
6 2016-06-17 17:02:14
Something not mentioned in the accepted answer: even when using an ID selector, jQuery's Sizzle returns an object/collection.接受的答案中未提及的内容：即使使用 ID 选择器，jQuery 的 Sizzle 也会返回一个对象/集合。 So if you are getting this error while using jQuery, use the [0] appendage to access the first index of the element.因此，如果您在使用 jQuery 时遇到此错误，请使用[0]附加物访问元素的第一个索引。 If you are curious, the indices can be explored by using console.dir($('#canvasId));如果您好奇，可以使用console.dir($('#canvasId));探索索引console.dir($('#canvasId));
For example, this perfectly normal selector would fail:例如，这个完全正常的选择器会失败：
var src = $('#canvasId').toDataURL("image/png");
But this one would work (notice the extra parenthesis):但是这个会起作用（注意额外的括号）：
var src = ($('#canvasId')[0]).toDataURL("image/png");
解决方案4
6 2011-12-29 11:49:54
var can = document.getElementsByTagName("canvas");
this returns an array of canvas elements.这将返回一个画布元素数组。 you need to get the canvas by id.您需要通过 id 获取画布。
var can = document.getElementById("canvasId");
解决方案5
0 2019-03-10 00:55:06
(SOLVED !) I've encountered with this problem & i solved it . （已解决！）我遇到过这个问题并解决了它。 First of ALL you should check that you have included the CDN HTML2CANVAS.js in your script links in your head tag .首先，您应该检查是否在 head 标签的脚本链接中包含了 CDN HTML2CANVAS.js。 To do this you should paste this script in your head tag , after the jquery CDN : (add this script below into your head tag )为此，您应该将此脚本粘贴到您的 head 标记中，在 jquery CDN 之后：（将此脚本添加到您的 head 标记中）
<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>
in this CDN , the function 'toDataURL' have been defined & if you go to this link and search (with CTRL+F) on this script page , you could find toDataURL function .在此 CDN 中，已定义函数“toDataURL”，如果您转到此链接并在此脚本页面上搜索（使用 CTRL+F），您可以找到 toDataURL 函数。 (which has been defined in this CDN) NOW my head tag is like this below and it works : （已在此 CDN 中定义）现在我的 head 标签如下所示，并且可以正常工作：
<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>
解决方案6
0 2019-06-13 09:35:16
This code is helpful for capture canvas image and download from a video.此代码有助于捕获画布图像并从视频中下载。
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>
解决方案7
0 2020-12-25 11:34:54
if you use jquery如果你使用 jquery
var canvas = $('#myCanvasId');
var image = canvas[0].toDataURL('image/png');
if you use javascript如果你使用 javascript
var canvas = document.getElementById('myCanvasId');
var image = canvas.toDataURL();
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.