Question

I want to write efficient code for playing/manipulating images in a web browser using JavaScript. I think using a video file may cut down http requests. How can I access a png/jpg/bytecode version of a single frame from a video?

Background

Currently, I have a sequence of ~1000 images, which vary ever-so-slightly, that need to be quickly accessible on my page. loading the images via HTTP requests is taking forever(obviously), and as my app grows, it is likely that this number will grow from 1000 to 5000 to 10,000 ...

Ajax requests for individual images will not work, b/c I need the image to load immediately (and don't have time to wait for a new http request).

My idea was to pre-process a video file on the server which shows the image progression- one image per frame-to speed up the rate of download and the browser's performance. I feel like this video could download to the client quickly based on the speed of watching videos online. I'm getting stuck on how to get picture content for a frame out of the video.

HTML5?

Note, I haven't looked into HTML5 yet, but would be willing to consider if it may help.

Question

I want to write efficient code for playing/manipulating images in a web browser using JavaScript. I think using a video file may cut down http requests. How can I access a png/jpg/bytecode version of a single frame from a video?

Background

Currently, I have a sequence of ~1000 images, which vary ever-so-slightly, that need to be quickly accessible on my page. loading the images via HTTP requests is taking forever(obviously), and as my app grows, it is likely that this number will grow from 1000 to 5000 to 10,000 ...

Ajax requests for individual images will not work, b/c I need the image to load immediately (and don't have time to wait for a new http request).

My idea was to pre-process a video file on the server which shows the image progression- one image per frame-to speed up the rate of download and the browser's performance. I feel like this video could download to the client quickly based on the speed of watching videos online. I'm getting stuck on how to get picture content for a frame out of the video.

HTML5?

Note, I haven't looked into HTML5 yet, but would be willing to consider if it may help.

• javascript
• jquery
• html
• video

• 1 Since the images vary only slightly from image to image, some video pression formats only save the differences between the frames making the video smaller in size than all the individual frames, or so I believe. Also, fewer http requests would be required to download a movie – Rishi Commented Apr 15, 2012 at 18:32

2 Answers 2

You can draw video frames to html5 canvas.

I created this fiddle by bining this and this.

Key point is getting the current video frame and drawing it into the canvas element.

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);
}

After getting it into canvas you can do almost anything with the image.

Instead of using a video file you could use image sprites - basically bine multiple images into a single big image, of which you only always show the appropriate region (assuming all images have the same dimensions this would be easy) - this would largely reduce the number of necessary HTTP requests and speed up the loading process in turn.