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

');

}

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

视频教程-HTML5进阶提升与案例开发视频课程-HTML5/CSS
HTML5进阶提升与案例开发视频课程中国实战派HTML5培训第一人,微软技术讲师,曾任百合网技术总监,博看文思HTML5总监.陶国荣长期致力于HTML5.JavaScript.CSS3.jQuery ...
mapbox-gl-draw改造，支持绘制时实时显示面积
在Mapbox的开发过程中,需要使用mapbox-gl-draw来进行多边形的绘制.编辑与状态控制,用起来还是非常方便的.最近有需求,需要再绘制时实时显示绘制的面积,这个确实比较麻烦,因为绘制都是这个 ...
vue 文本显示组件_一个Vue组件，可在您键入时突出显示文本
vue 文本显示组件 Vue高亮输入 (Vue Highlightable Input) Highlight and style specific words as you're typing. 键入 ...
java drawimage图片不完整_微信小程序canvas.drawImage完全显示图片问题的解决
问题描述问题产生对于微信小程序,canvas处理过程中,dramImage默认图片引用是有残缺的导入初始项目打开链接(原官网例子),浏览器唤醒微信开发这工具,打开连接之前需要下载好微信开发者工 ...
java写pdf中文不显示_java – iText pdf在使用NOTO字体或Source Hans时不显示中文字符...
我正在尝试使用NOTO字体( https://www.google.com/get/noto/)来显示中文字符.这是我的示例代码,来自iText的修改示例代码. public void createP ...
视频截图html,canvas与html5实现视频截图功能(示例代码)
这段时间一直在研究canvas,突发奇想想做一个可以截屏视频的功能,然后把图片拉去做表情包,哈哈哈哈哈哈~~ 制作方法: 1.在页面中加载视频在使用canvas制作这个截图功能时,首先必须保证页面上 ...
html5展示json数据库,显示数据在html5从数据库使用javascript和json
我想从MySQL数据库显示在html中的列表.要从MySQL获取数据我使用json和javascript.但它什么也没有显示!显示数据在html5从数据库使用javascript和json 我的HTM ...
html中显示优酷视频,html5 - h5页面上如何播放优酷视频
巴扎黑2017-04-17 12:10:441楼看到上面的答案,可能有人会有雾水.我来补充一下. 如果使用ueditor,kineditor等富文本编辑器插入的视频,其默认是插入swf结尾的url ...
html页面视频标签,html5基础标签(html5视频标签 html5新标签用法)
点评:html5基础,包括html5视频标签和html5新标签等标签用法,大家参考使用吧 1. 声明的变化 2. 指定字符编码的变化,html5中建议使用utf-8 3. Html5中允许没有 ...

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

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

最新文章

热门文章