5

我有一个带有画布覆盖的视频元素。然后我有一个绘图工具设置来绘制视频和一个保存按钮，该按钮从视频和画布中执行 drawImage 以保存复合帧。但是，第一次按保存时，我只从画布 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>');
}
4

3 回答 3

2

由于这是在带有 Safari 的 OSX 上，因此有一些坏消息：

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

资源

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

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

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

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

于 2013-11-15T20:00:50.120 回答
2

我最近自己也遇到了同样的问题，并通过将视频绘制到“虚拟”画布上来解决它，然后再对其进行“真实”工作。这适用于我的代码中尝试解析视频的所有方法，直到视频上触发了“canplaythrough”事件。我将“canplaythrough”事件处理程序包装在 Promise 中，并且仅在收到“canplaythrough”事件并尝试将视频绘制到虚拟画布上时才解决该承诺。 这似乎是Safari 错误的有效解决方法。

例如：

var readyPromise = new Promise(function(resolve) {
    video.addEventListener("canplaythrough", function() {
        var canvas = document.createElement("canvas"),
            context = canvas.getContext("2d");

        context.drawImage(video, 0, 0);

        resolve(video);
    });
});

readyPromise.then(function() {
    // NOW manipulate the video, draw it onto a canvas, etc
});
于 2014-05-29T04:06:03.163 回答
2

我遇到了同样的问题，并在最后一条评论中尝试了解决方案。它还没有为我工作。

我后来想通了，找到了一个解决方法：

在我的代码中，我还有其他一些绘图以及来自视频的 drawImage，例如

context.rect(0, 0, 50, 50);
context.fillStyle = 'black';
context.fill();

有了这些，即使在 'canplaythrough' 事件之后重绘它，第二次抽奖仍然无法工作。

所以我删除了上述三行，并在事件“canplaythrough”之后进行了第二次绘制。然后它起作用了。

简单地说，对我有用的代码是这样的：

context.drawImage(video, 0, 0);
video.addEventListener('canplaythrough', function () {
    context.drawImage(video, 0, 0);
});
于 2015-02-11T22:42:41.160 回答