javascript - 将图像从视频 JS 保存到 Canvas

Question

当我尝试从我刚刚创建的视频中捕获帧时出现错误。 它在 drawImage 之后:

Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLImageElement or SVGImageElement or HTMLVideoElement or HTMLCanvasElement or ImageBitmap or OffscreenCanvas)'

知道可能是什么原因吗？谢谢

<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

您正在向 drawImage() 证明一个 jQuery 对象，而不是 native Element 对象。您可以使用 [0] 或 get(0) 从 jQuery 对象中检索第一个底层元素:

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

另请注意，当您在 Canvas 上调用 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 元素是非常奇怪的。我建议不要那样做。