来自视频的HTML5 Canvas drawImage在第一次绘制时不显示

Question

我有一个带有画布覆盖的视频元素.然后我有一个绘图工具设置来绘制视频和一个保存按钮,从视频和画布执行drawImage以保存一个压缩帧.但是,我第一次按Save我只从画布drawImage获得结果,视频没有显示.在随后的保存中,我收到两个图像正确分层.我认为这可能是加载视频图像的问题,但是在我点击保存之前视频已经完全加载,甚至可以推进帧并使其在第二次保存时正常工作.

这是代码......

<div style="width:960px; height:540px; display:inline-block;">
    <video id="video" src="media/_tmp/AA_017_COMP_v37.mov" width="960" height="540" ></video>
</div>
<canvas id="canvas" width="960" height="540" style="position:absolute; top:40px; left:9px; z-index:100;"></canvas>
<input type="button" value="save" id="btn" size="30" onclick="save()" style="float:left; padding:4px; margin-right:4px;" >
<div id="saved" style="border:1px solid #000; position:absolute; top:626px; left:10px; bottom:40px; width:958px; overflow:auto;">SAVED:</div>


function save() {

    //COMP CANVAS OVER VIDEOFRAME
    var video = document.getElementById("video");
    var currentFrame = Math.floor((<?php echo $mov_frames ?> / video.duration) * video.currentTime);

    var compCanvas = document.createElement('canvas');
    compCanvas.width = video.width;
    compCanvas.height = video.height;
    compContext = compCanvas.getContext('2d');
    compContext.drawImage(video, 0, 0);
    compContext.drawImage(canvas, 0, 0);
    var dataURL = compCanvas.toDataURL();

    $("#saved").append('<div style="width:954px; border-bottom:1px solid #000; padding:2px 2px 0 2px;"><img id="compFrame_'+currentFrame+'" width="180" height="90" src="'+dataURL+'" />Frame: '+currentFrame+'</div>');
}

Answer 1

由于这是在 OSX 和 Safari 上进行的，所以有一些坏消息：

注意：iOS 目前不支持将视频作为画布 drawImage() 方法的源。

来源

我不知道这是否是过时的信息，但无论哪种情况，当前的实现都存在问题。正如所确定的（在评论中），该问题不太可能与编解码器有关，因为其他格式也会出现这种情况。小提琴消除了作为源的方法，toDataURL()所以剩下的就是drawImage()方法。

由于这可以在其他平台上使用提供的代码运行，并且从外观上看，这都不是问题的根源，因此您在这里看到的是 OSX 平台上 Safari 浏览器的一个非常可能的问题（错误）。

上面引用的官方文档还指出，这不受支持，因此这可能是一个非常早期的实现，仍然存在一些问题。

在这方面您无能为力，只能等待并将其报告为问题（我查找了报告的问题，但找不到任何问题，所以我建议您这样做）。