I have a very large image (500+ MB) that I want to display on a webpage. I want to be able to zoom out enough to view the whole image at one time, or zoom in so I can only see 1% of the image.
From what I can see the normal approach is to split the image into tiles and render them with something like http://www.dimin.net/software/panojs/
However if I split the image into 500 tiles, and someone views it fully zoomed out there still going to have to pull down 500 MB.
Is there some module I can use to generate tiles on the fly that are only big enough to show the maximum detail for the users current zoom level?
eg If the image is 19,200 x 10,800 pixels and some one is viewing it fully zoomed out on a 1920 x 1080 monitor then I only want to send down an image that is 1920 x 1080. But if they zoom in to 200 % then I want to send down a 1920 x 1080 image that shows a quarter of the original image.
I'm also going to need an overlay and the ability to scroll (by dragging the image).
If anyone can point me in the right direction that would be great.
You should read this : http://stackoverflow.com/a/17550376/2558648 I think is the better,
If you use your idea, lot of client browser will dead rapidly (Sorry for my bad english), and the client will get an out of memory.
With a fake maps, you will display only that the client want.
You'll want to use a library like GraphicsMagick for node.js, their example from here is:
var gm = require('gm');
gm('/path/to/image.jpg')
.resize(353, 257)
.autoOrient()
.write(writeStream, function (err) {
if (!err) console.log(' hooray! ');
});
Your next step will be creating a service that can request an appropriate derivative, so you could have requests like:
http://img.mysite.example/product/preview
http://img.mysite.example/product/medium
Where the "preview" image might be a 100px version fully zoomed-out and the "medium" image could be your 1920px derivative when the user is partially zoomed in (and then use tiles for your detailed zoom). Then change your client-side app to request the appropriate URL for the required zoom level.
Dealing with 500 MiB images (or anything in that region) you'll probably want to perform this scaling in advance and either cache or permanently persist the resultant image.