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

当我试图从刚创建的视频中捕获一帧时，出现了一个错误。 在drawImage之后：

未能在“CanvasRenderingContext2D”上执行“drawImage”：提供的值不是类型“（CSSImageValue或HTMLImageElement或SVGImageElement或HTMLVideoElement或HtmlCanvaElement或ImageBitmap或OffscreenCanvas）”

你知道原因是什么吗？谢谢

var$theImg=$（''）；
$theImg.attr（'data-disp'，name）；
$theImg.attr（'data-name'，file.name）；
$theImg.attr（'data-created'，1）；
$theImg.appendTo（“#可选视频”）；
$theImg.addClass（'selective-image'）；
$（e.target）.parent（）.parent（）.find（'.modal body'）.children（）.append（$theImg）；
变量$canvas=$（''）；
$theImg.append（$canvas）；
var canvas=$（“#canvas”）；
var video=$（“#video”）；
如果（视频长度）{
var ctx=canvas[0].getContext（'2d'）.drawImage（视频，0，0，canvas.width，canvas.height）；
//转换为所需的文件格式
var dataURI=canvas.toDataURL（'image/jpeg'）；//也可以使用'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=$（“”{
id:'视频'，
预加载：“元数据”，
src:'http://localhost/screens/page/VIDEO/vids/'+file.name，
data-disp:name，
data-name:file.name，
创建的数据：1，
类：“可选图像”
}).appendTo（“#可选视频”）；
//真的需要这行吗？你只是把它加在上面了。
//另外，请使用最近的（）而不是父（）.parent（）.parent（）。。。
$（e.target）.parent（）.parent（）.find（'.modal body'）.children（）.append（$video）；
变量$canvas=$（''{
id:'画布'，
宽度：640，
身高：480
}).appendTo（$视频）；
var canvas=$canvas[0]；
var video=$video[0]；
//已删除“如果”复选框-您刚刚创建了元素，它将存在
var ctx=canvas.getContext（'2d'）.drawImage（视频，0，0，canvas.width，canvas.height）；
var dataURI=canvas.toDataURL（'image/jpeg'）；

我将“video[0]”更改为$theImg[0]，效果很好！谢谢兄弟