CODEWITHSUNDEEP
javascriptdomcanvas
karth
karth

Reputation: 655

toDataURL not a function

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.

Upvotes: 33

Views: 85724

Answers (7)

Sunasara Hasanali
Sunasara Hasanali

Reputation: 11

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

Upvotes: 1

Rajaneesh Vasampalli
Rajaneesh Vasampalli

Reputation: 1

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>

Upvotes: 0

Farshad Aghasharif
Farshad Aghasharif

Reputation: 49

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

Upvotes: 0

dhaupin
dhaupin

Reputation: 1643

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

Upvotes: 6

takeshin
takeshin

Reputation: 50638

Double check you are running toDataURL() the canvas object itself, not on the context object.

Upvotes: 9

Felix Kling
Felix Kling

Reputation: 816422

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.

Upvotes: 51

Kashif Khan
Kashif Khan

Reputation: 2645

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

Upvotes: 7

Related Questions