web-dev-qa-db-ja.com

toDataURLは関数ではありません

キャンバスのURLを生成しようとしています。ここに私が従ったステップがあります：

var can = document.getElementsByTagName("canvas");
var src = can.toDataURL("image/png");

上記のコードをfirebugで実行しようとすると、エラーがスローされます。

TypeError: can.toDataURL is not a function

UbuntuでFirefox 8を実行しています。

javascriptdomcanvas
21
karthik

getElementsByTagNameは NodeListを返します[ドキュメント] 、単一の要素ではありません。

リストの最初の要素にアクセスするだけです。

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

各キャンバスのデータURLを取得する場合は、リストを反復処理する必要があります。それ以外の場合は、キャンバスにIDを指定し、getElementByIdを使用して参照を取得する方が便利な場合があります。

42
Felix Kling

コンテキストオブジェクトではなくキャンバスオブジェクト自体をtoDataURL()で実行していることを再確認してください。

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

これはキャンバス要素の配列を返します。 IDでキャンバスを取得する必要があります。

var can = document.getElementById("canvasId");
6
Kashif Khan

受け入れられた回答で言及されていないもの：IDセレクターを使用している場合でも、jQueryのSizzleはオブジェクト/コレクションを返します。したがって、jQueryを使用しているときにこのエラーが発生する場合は、_[0]_アペンデージを使用して要素の最初のインデックスにアクセスします。興味があれば、console.dir($('#canvasId));を使用してインデックスを調べることができます。

たとえば、この完全に通常のセレクタは失敗します。

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

しかし、これはうまくいくでしょう（余分な括弧に注意してください）：

_var src = ($('#canvasId')[0]).toDataURL("image/png");
_
2
dhaupin

（解決しました！）私はこの問題に遭遇しました＆私はそれを解決しました。まず最初に、ヘッドタグのスクリプトリンクにCDN HTML2CANVAS.jsが含まれていることを確認する必要があります。これを行うには、このスクリプトをjtag CDNの後にヘッドタグに貼り付けます：（以下のスクリプトをヘッドタグに追加します）

<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>
1
Farshad Sh

このコードは、キャンバスイメージのキャプチャとビデオからのダウンロードに役立ちます。

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>
0
Rajaneesh Vasampalli