These are chat archives for openseadragon/openseadragon

26th
Sep 2016
John Hoffer
@thejohnhoffer
Sep 26 2016 13:56
Just to be sure, before I implement this myself, has anyone enabled support for OpenSeadragon to load tiles as zipped raw image data?
John Hoffer
@thejohnhoffer
Sep 26 2016 14:09
Following the documentation for tile-loaded:
Triggered when a tile has just been loaded in memory. That means that the image has been downloaded and can be modified before being drawn to the canvas.
Sean Nichols
@seanich
Sep 26 2016 14:43
I'm working on a PR for loading tiles with Ajax (see issue #1032) that will help with part of what you're after. Currently the code loads tiles by setting the src attribute of an Image object directly to the tile URL which prevents you from accessing the raw data.
Are you planning on having multiple tiles bundled together or just single tiles as zipped data? The former would require quite a few changes to how tile loading currently works. The latter could easily be accomplished by adding a hook to tranform tile data before it's attached to an Image object.
John Hoffer
@thejohnhoffer
Sep 26 2016 14:51
HI Sean- that looks super useful! Right now I'm only trying to load single tiles as zipped data. I'm roughly accomplishing what I want through loading and unzipping the data myself in each tile's first call to the tile-drawing event. I've also plugged into the tile-loadedevent. Both methods are hacks that work without changing openSeadragon at al...
Sean Nichols
@seanich
Sep 26 2016 14:55
Ah, interesting. I'm assuming you're getting the data out via the canvas?
John Hoffer
@thejohnhoffer
Sep 26 2016 14:56
If I set a getContext2Dfunction for any custom tileSource, then the url from getTileUrl isn't used internally, but I can use those urls to request and unzip the data myself when the tile-drawing and tile-loadedevents are still called.
In either tile-drawing or tile-loaded event handlers, I basically do this:
handler = function(e,raw) {
    var input = e.tile.context2D.canvas;
    e.tile.context2D.drawImage(raw, 0, 0, input.width, input.height);
}
Sean Nichols
@seanich
Sep 26 2016 15:01
Oh, I see. That makes sense. Out of curiosity, why do you use zipped tile data rather than a format that supports lossless compression such as PNG?
John Hoffer
@thejohnhoffer
Sep 26 2016 15:03
data.png
Our data look like this ^
I'm ignorant. Would PNG be able to compress this data as fully as zlib?
Sean Nichols
@seanich
Sep 26 2016 15:08
I'm not an expert on it, but I believe that PNG is very good at images like that where there are large areas of the same colour. That's why it's often used for screenshots.
It looks like the image you uploaded was converted to PNG by Gitter and it came in at 28.8K. Not sure what kind of size you're getting with zlib
I assume that you're decompressing the zlib data in Javascript, so one of the biggest benefits of using PNG over that would be that the browser would decompress the data using native code off of the main thread.
John Hoffer
@thejohnhoffer
Sep 26 2016 15:14
For that image, we get 10kb using python's zlib. I have no idea why there should be such a difference, and I do like your point about separate threading for decompression.
Sean Nichols
@seanich
Sep 26 2016 15:14
Hm, interesting. There's a lot you can do to optimize the size of PNG as well (see tinypng), so it's worth looking into.
I think the optimizations done by tinypng would be perfect for that type of image as their main strategy is reducing the colour palette.
I'm not sure if there's an open source solution using the same methods. You'd have to do some digging
Sean Nichols
@seanich
Sep 26 2016 15:20
pngquant looks promising at a quick glance
John Hoffer
@thejohnhoffer
Sep 26 2016 15:22
We need full 4 channel 32-bit data when comparing all the tiles, but I suppose you could reduce the color pallete for each tile if there are at most a fixed number of colors per tile...
But the default of 256 in pngquant is much too small for our purposes.
Sean Nichols
@seanich
Sep 26 2016 15:25
Ah, I see. It looks like the --posterize option might allow you to define the size of your colour palette
Actually it seems if you set --quality to 100 it will try to come up with a palette size that is completely lossless
John Hoffer
@thejohnhoffer
Sep 26 2016 15:28
Png standards only allow for 256 indexed colors at most. But it does look like each of those indices could be a full 32 bit color. Perhaps there are a large number of tiles with only 256 or fewer colors per tile. Then maybe the server could make compression decisions based on whether pallete reduction would be lossless for that particular tile.
This is assuming pngquant uses indexed colors,
Sean Nichols
@seanich
Sep 26 2016 15:34
Yeah, that would probably be a good strategy
John Hoffer
@thejohnhoffer
Sep 26 2016 15:36
The image I sent you has only 64 colors, and tinypng gets it down to a 6kb compared to gzip's 10kb. It would definitely be worth it for tiles like those. Thank you!
Sean Nichols
@seanich
Sep 26 2016 15:37
Excellent! Glad I could help :)
John Hoffer
@thejohnhoffer
Sep 26 2016 15:37
:smile: :+1: