These are chat archives for openseadragon/openseadragon

14th
Nov 2016
Tristan Roddis
@tristanr-cogapp
Nov 14 2016 14:58
Is there any way to turn off the pixel blending that Seadragon does?
And for bonus points, only to do this when I'm very far zoomed in (e.g. only showing 4px square in the viewport)
Ian Gilman
@iangilman
Nov 14 2016 17:40
@tristanr-cogapp We're just using the standard Canvas scaling. If you want to go sharp you'll have to tell the Canvas to do so (which looks like is possible if not exactly cross-platform). Take a look at: http://stackoverflow.com/questions/7615009/disable-interpolation-when-scaling-a-canvas
That's from a couple of years ago, so the state of the art may have advanced
Regarding doing it only when zoomed in, you'll have to watch for zoom events and flip it yourself based on the zoom level
Tristan Roddis
@tristanr-cogapp
Nov 14 2016 17:56
Thanks, @iangilman . I just tried adding this CSS code:
canvas {
image-rendering: optimizeSpeed;
image-rendering: -moz-crisp-edges;
image-rendering: -webkit-optimize-contrast;
image-rendering: optimize-contrast;
image-rendering: pixelated;
-ms-interpolation-mode: nearest-neighbor;
border: 5px solid #ddd;
}
Ian Gilman
@iangilman
Nov 14 2016 17:57
Any luck?
Tristan Roddis
@tristanr-cogapp
Nov 14 2016 17:58
But although inspecting the canvas element generated by OSD shows the correct class for Chrome (image-rendering: pixelated) it does not seem to have any effect
Toggling it makes no difference
Whereas the example at http://jsfiddle.net/namuol/VAXrL/1459/ displays nicely pixellated
Ian Gilman
@iangilman
Nov 14 2016 17:59
The Canvas on the screen is the destination Canvas... I wonder if you also need to apply that setting to the source canvases for each tile, which are offscreen and therefore probably not affected by your CSS
Hmm... also that jsfiddle is a Canvas that's getting resized on screen, but it doesn't have anything to do with copying from one Canvas to another (which is what we do within OSD)... maybe the link I gave you is barking up the wrong tree
You need something that affects scaling when copying
Tristan Roddis
@tristanr-cogapp
Nov 14 2016 18:01
How can I get at the source canvas to check? document.getElementsByTagName('canvas') only shows the one on screen
Ian Gilman
@iangilman
Nov 14 2016 18:03
Btw, this looks more like what you're looking for: http://jsfiddle.net/ikaruss/VAXrL/1164/ ...and I think you do it on the destination Canvas
Seems to work in Chrome but not in Firefox
Tristan Roddis
@tristanr-cogapp
Nov 14 2016 18:04
Aha. So somehow setting ctx.imageSmoothingEnabled = false; ?
Ian Gilman
@iangilman
Nov 14 2016 18:06
Yes... viewer.drawer.context.imageSmoothingEnabled = false should do it
Tristan Roddis
@tristanr-cogapp
Nov 14 2016 18:06
Yay! Works a treat.
Thanks for your help!
Ian Gilman
@iangilman
Nov 14 2016 18:06
Excellent :)
You might have to look around a little to find what works in all browsers
Tristan Roddis
@tristanr-cogapp
Nov 14 2016 18:08
Good point. This is only for a demo, and it only enhances what it would do with interpolation, so I'm not too concerned
Ian Gilman
@iangilman
Nov 14 2016 18:08
Cool :)
Antoine Vandecreme
@avandecreme
Nov 14 2016 20:17
@tristanr-cogapp you can also look at openseadragon/openseadragon#1028
Ian Gilman
@iangilman
Nov 14 2016 21:10
:thumbsup: