I am trying to generate a url for the canvas. 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 :
TypeError: can.toDataURL is not a function
I am running firefox 8 on ubuntu.
getElementsByTagName returns a NodeList [docs], not a single element.
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 getElementById might be more convenient.
Double check you are running toDataURL() the canvas object itself, not on the context object.
var can = document.getElementsByTagName("canvas");
this returns an array of canvas elements. you need to get the canvas by id.
var can = document.getElementById("canvasId");
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));
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");
if you use jquery
var canvas = $('#myCanvasId');
var image = canvas[0].toDataURL('image/png');
if you use javascript
var canvas = document.getElementById('myCanvasId');
var image = canvas.toDataURL();
(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 )
<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 :
<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>
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>
