ToDataURL не является функцией

Я пытаюсь создать URL-адрес для холста. Вот шаги, которые я выполнил:

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

Когда я попытался запустить вышеуказанный код в firebug, он выдает сообщение об ошибке:

TypeError: can.toDataURL is not a function

Я запускаю firefox 8 на ubuntu.

Ответ 1

getElementsByTagName возвращает NodeList ^[docs], а не один элемент.

Просто доступ к первому элементу списка:

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

Если вы хотите получить URL-адрес данных для каждого холста, вам придется перебирать список. В противном случае предоставление canvas идентификатора и получение ссылки с помощью getElementById может быть более удобным.

Ответ 2

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

возвращает массив элементов холста. вам нужно получить холст по id.

var can = document.getElementById("canvasId");

Ответ 3

Дважды проверьте, что вы используете toDataURL() сам объект canvas, а не объект контекста.

Ответ 4

Что-то не упоминается в принятом ответе: даже при использовании селектора ID, jQuery Sizzle возвращает объект/коллекцию. Поэтому, если вы получаете эту ошибку при использовании jQuery, используйте app [0] для доступа к первому индексу элемента. Если вам интересно, индексы можно изучить, используя console.dir($('#canvasId));

Например, этот совершенно нормальный селектор потерпит неудачу:

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

Но это будет работать (обратите внимание на дополнительную скобку):

var src = ($('#canvasId')[0]).toDataURL("image/png");

Ответ 5

(Решено!) Я столкнулся с этой проблемой и решил ее. Прежде всего вы должны убедиться, что вы включили CDN HTML2CANVAS.js в ваши ссылки на скрипты в вашем теге head. Чтобы сделать это, вы должны вставить этот скрипт в тег head, после jquery CDN: (добавьте этот скрипт ниже в тег head)

<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/0.4.1/html2canvas.min.js"></script>

в этом 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>

Ответ 6

Этот код полезен для захвата изображения холста и загрузки из видео.

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>