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

我尝试从刚创建的视频中捕获帧时出错。
在drawImage之后：
未能对“CanvasRenderingContext2D”执行“drawImage”：提供的值不是类型“（CSSImageValue或HTMLImageElement或SVGImageElement或HTMLVideoElement或htmlCanvaSeElement或ImageBitmap或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'

最佳答案

您正在证明jQuery对象是drawImage()，而不是本机元素对象。您可以使用[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元素是非常奇怪的。我建议你不要那样做。

关于javascript - 从视频JS将图像保存到 Canvas ，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/54647582/