Сохранить изображение на холсте из видео JS

Question

Я получаю сообщение об ошибке при попытке захватить кадр из только что созданного видео.Это после drawImage:

Не удалось выполнить 'drawImage' для 'CanvasRenderingContext2D': предоставленное значение не относится к типу '(CSSImageValue или HTMLImageElement, или SVGImageElement, или HTMLVideoElement, или HTMLCanvasElement, или ImageBitmap, или 100 * Offscreen)*

Есть идеи, в чем может быть причина?Спасибо

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

var $theImg = $('<video id="video" preload="metadata" src="http://localhost/screens/page/VIDEO/vids/' + file.name + '"></video>');
$theImg.attr('data-disp', name);
$theImg.attr('data-name', file.name);
$theImg.attr('data-created', 1);
$theImg.appendTo('#selectable-videos');
$theImg.addClass('selectable-image');
$(e.target).parent().parent().find('.modal-body').children().append($theImg);

var $canvas = $('<canvas id="canvas" width="640" height="480"></canvas>');
$theImg.append($canvas);

var canvas = $('#canvas');
var video = $('#video');

if (video.length) {
  var ctx = canvas[0].getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
  //convert to desired file format
  var dataURI = canvas.toDataURL('image/jpeg'); // can also use 'image/png'

Answer 1

Вы проверяете объект jQuery на drawImage(), а не нативный объект Element.Вы можете использовать [0] или get(0) для извлечения первого базового элемента из объекта jQuery:

var ctx = canvas[0].getContext('2d').drawImage(video[0], 0, 0, canvas.width, canvas.height);

Также обратите внимание, что у вас возникнет аналогичная проблема в следующей строке при вызове toDataURL() нахолст.

var dataURI = canvas[0].toDataURL('image/jpeg');

Обратите внимание, что логику можно привести в порядок, поскольку использование одинаковых имен переменных, содержащих разные типы объектов, немного сбивает с толку.Попробуйте это:

var $video = $('<video></video>', {
  id: 'video',
  preload: 'metadata',
  src: 'http://localhost/screens/page/VIDEO/vids/' + file.name,
  data - disp: name,
  data - name: file.name,
  data - created: 1,
  class: 'selectable-image'
}).appendTo('#selectable-videos');

// is this line really needed? You just appended it above. 
// also, use closest() instead of parent().parent().parent()...
$(e.target).parent().parent().find('.modal-body').children().append($video);

var $canvas = $('<canvas></canvas>', {
  id: 'canvas',
  width: 640,
  height: 480
}).appendTo($video);

var canvas = $canvas[0];
var video = $video[0];

// removed 'if' check - you just created the element, it will exist
var ctx = canvas.getContext('2d').drawImage(video, 0, 0, canvas.width, canvas.height);
var dataURI = canvas.toDataURL('image/jpeg');

Наконец, очень странно, что вы добавляете canvas к элементу video.Я бы предложил не делать этого.