Support high image resolution saving from the UI

[ernoma]

Saving easily high resolution map images from Oskari is the wished functionality of this issue.

Currently the city of Tampere has Oskari version 2.5.1 installed and when a user opens context menu on a map there is no "Save image as" function available:

There has been this functionality available (at least for the Edge browser and if I remember correctly others - but the function has not always appeared in the context menu with the same Oskari and Edge version, only sometimes) in at least one earlier Oskari version that has been used in Tampere. This "Save image as" context menu function has allowed saving higher resolution images of the map than any of the currently available Oskari functionalities (at least what we have found) except via printing pdf first and then extracting the image from there. The print as image functionality of the Oskari does not give as high resolution image either (it seems to use the screen capture method like the other ways to extract map images from the current City of Tampere Oskari version we have figured out).

[ZakarFin]

The "Save image as" is a built-in browser functionality for images. OpenLayers has used HTML canvas element for rendering the map for some years already so it's not an image that the browser can offer to download. Maybe if you click on some marker icon that is an png/svg format you can get such context-menu item but it's only for saving such marker icon if even then. But that's the only thing that comes to mind if you sometimes get that option.

You can get the canvas content as image programmatically (that's how the screenshot function works in Oskari) but it requires the layers and other content on the canvas to be "clean"/without cross-origin issues and such. You can see some documentation of this on https://oskari.org/api/bundles#/2.5.1/framework/rpc under getScreenshot(). So it might be possible that a browser could offer this option even on modern OpenLayers maps if the planets are aligned but it's not very likely. What you would get would be the same as taking a screenshot of the map yourself and not a higher resolution image.

[jampukka]

Print as image does not do a screen capture. Instead the image is created fully server-side. The server fetches raster images/tiles from backing services (WMS/WMTS) and/or vectors from vector data sources and rasterizes them and then finally adds them all into a single image. The logic is same as for the PDFs.

What do you mean by higher resolution? For example, you want an image from center coordinate x,y with zoom level / resolution of z and certain width/height. If we "over zoom" for higher quality chances are that as the resolution changes the style also changes (for example if we request tiles from WMTS with zoom + 1 they might look completely different compared to zoom + 0). For vector data this is obviously not an issue.

[ZakarFin]

Hmm, actually I can get the "Save as image" from the map with right click. Both in https://kartta.paikkatietoikkuna.fi/ and in https://kartat.tampere.fi/oskari/. Both having the same Oskari version (2.5.1 currently). I just haven't ever used it with the map so I assumed it was not supported for canvas elements. I only tested it with the default base map so if the browser doesn't allow this it might be because it considers the canvas "dirty". At least that's a common error on the screenshot functionality. I assume the same rules are true for the browsers built-in functionality to save a canvas as an image as with programmatic use. See SecurityError on https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getImageData

I was also assuming high resolution images referred to something like these:

• https://openlayers.org/en/latest/examples/xyz-retina.html
• https://openlayers.org/en/latest/examples/wmts-hidpi.html

[jampukka]

Yes that's what I thought, but the issue here is that you need specific higher resolution source tiles, e.g. /256/{z}/{x}/{y}@2x.png or a "HiDPI capable WMTS service", but I don't think those are being used here? I might be wrong, in which case it would be interesting to add support for those to service-print.

[ZakarFin]

So if the "Save as image" isn't always available it's probably because of some of the layers on the map (or it might be marker icons that have been loaded from another domain etc). For layers you need to enable the proper CORS-headers on the service where the layer images are loaded from to Oskari and as mentioned on the getScreenshot() documentation you will need to add

{
    crossOrigin: 'anonymous'
}

on the layers attributes field for it to work. At least on older versions of OpenLayers having the crossOrigin set for layers that DON'T have the CORS headers results in the layers not working at all so it can't be added "just in case" to make it easier for the admin :/

[ernoma]

Thank you for the extensive comments!

I passed link to this page and, as translated to Finnish, part of the information you gave to the user who raised this issue for me. I am waiting answer from the user and will let you know...

[ernoma]

The user tried to print as a png image but the image quality was not quite as good as it was via the "save as image" function.

[ZakarFin]

The user tried to print as a png image but the image quality was not quite as good as it was via the "save as image" function.

The browser/OpenLayers renders the things you get with "save the image" and you get an image that is sized and shaped based on the browser window. The printing is done on the server-side with the server code fetching the raster images from service again and rendering vector features on the PNG/PDF of the requested size and other options that are available for server-side printing. So it works a bit differently/explains the difference in output quality. There might be some configurations that could be tuned for server-side printing, but it would require an environment that can reproduce the quality difference between the frontend image and server printing and someone willing to put time on figuring out what could or should be tuned on the server printing.

[ZakarFin]

Closing this so any new conversation around this topic can be gathered on the new issue #294 that has very similar topic.