What is it?
Large_Image_Scroller is a piece of JavaScript that allows for easy viewing of incredibly large images in the browser. 
 
What'd I do?
I scripted the script.
 
How'd I do it?
I was at first quite upset with has poorly CSS moved large images. I was hoping to recreate my Flash portfolio site (Vermeersh.ca) in HTML. After a bunch of trying to get the images to move smoothly I completely gave.
 
A couple years later I discoverd the CreateJS library and realized it facilitates some pretty powerful bitmap manipulation. After some testing I discoverd that mobile browsers do not deal with images larger than 2048x2048 (or 1024x1024 in older browsers). They simply do not recognize them as anything. Roadblock!

 

After some thinking, I figured out a way to cut the image into smaller tiles and then reassemble them client side. This process also made me get pretty stricyt with exactly what bitmap data was being displayed on screen. Here's a rundown of generally how it works:

 

The script loads all of the tiles (as defined by the developer).

Each tile is assigned a grid position.

The size of the first tile dynamically determines the grid size.

The browser window acts as the viewport. As the user moves their mouse (or tilts their phone), the viewport changes.

Each frame, the script determines the x,y,width and height of the viewport.

The script then takes this info and sees which tiles overlap these coordinates.

The script then cuts only the pieces of these bitmaps it needs to fill the screen.

The script draws each piece from the selected tiles to a single new bitmap.

Repeat every frame.

 

The end.

 

Once I got this working I realized that there really was no upper limit to pixel dimensions as long as each tile was smaller than 2048x2048. The performance is shockingly good. . Even at stupid big sizes.
 
Why'd I do it?
To see if I could figure it out.  I'm sure it will come of use at some point.
 
URL
http://vermeersch.ca/large_image_scroller/

 

Github