6

问题

我想编写高效的代码来使用 JavaScript 在网络浏览器中播放/操作图像。我认为使用视频文件可能会减少 http 请求。如何从视频中访问单个帧的 png/jpg/字节码版本？

背景

目前，我有大约 1000 张图像的序列，这些图像变化非常轻微，需要在我的页面上快速访问。通过 HTTP 请求加载图像需要永远（显然），随着我的应用程序的增长，这个数字很可能会从 1000 增长到 5000 到 10,000 ......

单个图像的 Ajax 请求将不起作用，b/c 我需要立即加载图像（并且没有时间等待新的 http 请求）。

我的想法是在服务器上预处理一个视频文件，该文件显示图像进展——每帧一张图像——以加快下载速度和浏览器的性能。根据在线观看视频的速度，我觉得这个视频可以快速下载到客户端。我被困在如何从视频中获取一帧的图片内容。

HTML5？

请注意，我还没有研究过 HTML5，但愿意考虑它是否有帮助。

4

2 回答 2

14

您可以将视频帧绘制到 html5 画布上。

我通过结合this和this创建了这个小提琴。

关键是获取当前视频帧并将其绘制到画布元素中。

var delay=20;
function draw(cvideo,ccanvas,canvas_width,canvas_height) {
  if(cvideo.paused || cvideo.ended) return false;
  ccanvas.drawImage(cvideo,0,0,canvas_width,canvas_height);
  setTimeout(draw,delay,cvideo,ccanvas,canvas_width,canvas_height);
}

将其放入画布后，您几乎可以对图像执行任何操作。

于 2012-04-15T18:49:54.700 回答
2

您可以使用图像精灵而不是使用视频文件- 基本上将多个图像组合成一个大图像，您只总是显示适当的区域（假设所有图像具有相同的尺寸，这很容易） - 这将大大减少必要的 HTTP 请求数量并依次加快加载过程。

于 2012-04-15T18:31:08.337 回答