时间戳

首页 > 解决方案 > 将图像从视频 JS 保存到画布

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

问题描述

当我尝试从刚刚创建的视频中捕获帧时出现错误。在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'

标签： javascriptphpjqueryhtmlhtml5-canvas

解决方案

您正在证明 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');

最后，您将 a 附加canvas到video元素是非常奇怪的。我建议不要那样做。

推荐阅读