Question

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

无法在'CanvasRenderingContext2D'上执行'drawImage'：提供的值不是'（CSSImageValue或HTMLImageElement或SVGImageElement或HTMLVideoElement或HTMLCanvasElement或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'

Answer 1

您正在向drawImage()证明一个jQuery对象，而不是本机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元素上是很奇怪的。我建议不要这样做。

从视频JS将图像保存到画布

1 个答案: