Javascript toDataURL 不是函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8667458/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
toDataURL not a function
提问by karthik
I am trying to generate a url for the canvas. Here are the steps I followed:
我正在尝试为画布生成一个 url。以下是我遵循的步骤：
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。
回答by Felix Kling
getElementsByTagNamereturns a NodeList[docs], not a single element.
getElementsByTagName返回[docs]，而不是单个元素。NodeList
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. Otherwise, giving the canvas an ID and retrieving the reference with getElementByIdmight be more convenient.
如果要获取每个画布的数据 URL，则必须遍历列表。否则，给画布一个 ID 并检索引用getElementById可能更方便。
回答by takeshin
Double check you are running toDataURL()the canvas object itself, not on the context object.
仔细检查您正在运行toDataURL()画布对象本身，而不是上下文对象。
回答by Kashif Khan
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");
回答by dhaupin
Something not mentioned in the accepted answer: even when using an ID selector, jQuery's Sizzle returns an object/collection. So if you are getting this error while using jQuery, use the [0]appendage to access the first index of the element. If you are curious, the indices can be explored by using console.dir($('#canvasId));
接受的答案中未提及的内容：即使使用 ID 选择器，jQuery 的 Sizzle 也会返回一个对象/集合。因此，如果您在使用 jQuery 时遇到此错误，请使用[0]附件访问元素的第一个索引。如果您好奇，可以使用以下方法探索索引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");
回答by Farshad Sh
(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 . 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 标签的脚本链接中包含了 CDN HTML2CANVAS.js。为此，您应该将此脚本粘贴到您的 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 . (which has been defined in this CDN) NOW my head tag is like this below and it works :
在此 CDN 中，已定义函数“toDataURL”，如果您转到此链接并在此脚本页面上搜索（使用 CTRL+F），您可以找到 toDataURL 函数。（已在此 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>
回答by Rajaneesh Vasampalli
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>
