html5 drawimage 不显示,javascript – 来自视频的HTML5 Canvas drawImage在第一次绘制时不显示...

我有一个带有画布覆盖的视频元素.然后我有一个绘图工具设置来绘制视频和一个保存按钮,从视频和画布执行draw

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

这是代码……

SAVED:

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('

Frame: '+currentFrame+'

');

}