search

informatics-isi-edu / openseadragon-viewer

2D viewer with openseadragon
Apache License 2.0
5 stars 2 forks source link

screenshot feature not working on Firefox and Safari #35

Closed RFSH closed 4 years ago

RFSH commented 4 years ago

As title suggests, the screenshot feature (exportViewToJPG function) is not working on Firefox and Safari. It works properly on chrome, however.

We're using html2canvas for this feature. So I was looking into if this is a known issue. From what I gathered so far, SVGs should show properly as long and the only known issue is when the SVGs don't have any width/height property. But that's not the case in our SVGs since we're always attaching width and height.

I couldn't find any other source for this bug so I decided to create this issue for now. We might want to find more information about this, and if this wasn't fixable, we can start looking at alternative solutions.

karlcz commented 4 years ago

I don't know if you've already considered this, but modern Firefox has security/privacy options around canvas access.

I was having problems with a different plotly-based viewer until I found the little content-blocking menu and opted in to allow more access on my browser... until I recognized the little icon in the location bar, I was confused by the silent failure of the plotly app functions.

RFSH commented 4 years ago

@karlcz do you remember which setting it was on Firefox? The html2canvas is creating a canvas for us and then we're generating a downloadable image based on that canvas.
Since we're using canvas it might have the same issue, but Firefox is not showing me any warning so I can opt-in. Disabling the "Enhanced tracking protection" didn't make any difference either.

karlcz commented 4 years ago

It was just a small content-blocking modal menu that opens when you click on the little icons in the left edge of the location bar, near the TLS "padlock" or similar site security indicators.

RFSH commented 4 years ago

I deployed the old chaise code that works with the changes in #9 in the following:

https://dev.rebuildingakidney.org/~ashafaei/chaise_screenshot/viewer/#2/Gene_Expression:Image/id=16-2EC6?url=/iiif/2/https%3A%2F%2Fderiva-imaging.isi.edu%2Fimages%2F20160707-hKDCS19_133-JAM-0-30-000-3.tif/info.json&url=/~vipul/chaise-demo/data/20160707-hKDCS19-133-JAM-0-30-00_scene3_fixed.svg&channelName=TL%20Brightfield&meterScaleInPixels=455504&waterMark=GUDMAP.org

It has the same issue. Based on the comments on the issue, it used to work properly for Mac/Firefox. So most probably something might have changed in how Firefox is handling this and as karl pointed out it could be related to a privacy setting in the browser.

RFSH commented 4 years ago

I spend more time trying to figure this out. I created this jsfiddle so I can test different versions with different browsers. When I started working on this the latest version was rc5, and based on my testing alpha1 and alpha2 versions were the only versions that could handle simple SVG on Firefox/Safari/Chrome. But in the following days, they introduced rc7 which fixed most of the issues that I was experiencing.

So I decided to bump our version (we were using rc3), but that didn't help. I still couldn't get the annotations in Firefox and Safari using rc7. Using foreignObjectRendering fixed the issue for Firefox, but completely broke the Safari screenshot because of the strict privacy policies of Safari. Also, the alpha1 and alpha2 wouldn't work at all with any of the browsers.

In the end, I decided to completely remove html2canvas from our repo and add the SVG overlays manually. This way I'm completely in control of how the app behaves and it's not just a black-box that I was trying to understand. Besides, html2canvas is good if we're trying to convert the whole HTML page without worrying about its content. In our case, osd is giving us a canvas and all we had to do was adding the extra SVG overlays.