题
我想编写有效的代码,使用JavaScript在Web浏览器中播放/操作图像.我认为使用视频文件可能会减少http请求.如何从视频中访问单帧的png / jpg /字节码版本？
背景
目前,我有大约1000张图像的序列,这些图像的变化非常小,需要在我的页面上快速访问.通过HTTP请求加载图像将永远(显然),随着我的应用程序的增长,这个数字可能会从1000增加到5000到10,000 ……
对单个图像的Ajax请求不起作用,b / c我需要立即加载图像(并且没有时间等待新的http请求).
我的想法是在服务器上预处理视频文件,显示图像进展 – 每帧一个图像 – 以加快下载速度和浏览器的性能.我觉得这个视频可以根据在线观看视频的速度快速下载到客户端.我陷入了如何从视频中获取帧的图片内容的问题.
HTML5？
请注意,我还没有考虑过HTML5,但愿意考虑是否有所帮助.
解决方法
您可以将视频帧绘制到html5画布.
关键点是获取当前视频帧并将其绘制到canvas元素中.
var delay=20;
function draw(cvideo,ccanvas,canvas_width,canvas_height) {
if(cvideo.paused || cvideo.ended) return false;
ccanvas.drawImage(cvideo,canvas_height);
setTimeout(draw,delay,cvideo,canvas_height);
}
将它放入画布后,您几乎可以对图像做任何事情.
