toDataURL не функция - PullRequest
Новая
       1

toDataURL не функция

20 голосов
/ 29 декабря 2011

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

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

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

TypeError: can.toDataURL is not a function

Я использую Firefox 8 в Ubuntu.

Ответы [ 6 ]

38 голосов
/ 29 декабря 2011

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

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

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

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

5 голосов
/ 29 декабря 2011 
var can = document.getElementsByTagName("canvas");

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

var can = document.getElementById("canvasId");
4 голосов
/ 22 января 2016

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

2 голосов
/ 17 июня 2016

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

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

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

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

var src = ($('#canvasId')[0]).toDataURL("image/png");
1 голос
/ 10 марта 2019

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

<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>
0 голосов
/ 13 июня 2019

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

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>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...