Printing - Improve resolution

[majkshkurti]

Goal of this issue

Currently, the printing resolution is very low due to how we generate the pdf. The screenshot is captured in the screen's resolution, which limits the flexibility to change the resolution above it. This is also very slow and sometimes results in a bad user experience. We can investigate some new approaches like OffScreenCanvas, which uses service workers in the background to make it async and in a higher resolution

Resources

https://github.com/camptocamp/inkmap

[metemaddar]

We can also use wkhtmltopdf. It can wait for window to get special status, for example: map_ready, So we can listen to map tiles and when they got finished, we can start converting (ref).

With wkhtmltopdf we can add special headers and footers (needed references for official reports), but for printing, wk needs the user's data. we need to pass user's data to it so that it can print the output.

[cinaaaa]

@majkshkurti Using OffScreenCanvas is not possible, Also I tried some other things like window.print and custom window + print but not sure to make it possible to print it well ( for example for the 1+ page pdf ). Another thing I see is the Puppeteer library but totally disagree with it because it's more than we need ( 100kb bundle also ). Translating the current page to canvas and printing is the best solution currently but as you said we have a lack of resolution and quality! Maybe we should check the backend-related solutions.

[majkshkurti]

@cinaaaa Yes, Firefox doesn't support it until 104, but it seems they released it last month. Chrome and Edge have it, though. And I think the library has a fallback strategy when OffscreenCanvas isn't supported. The advantage using inkmap is that we will not have to change the current implementation much, since we just have to add the map blob (high res image) to our canvas for the print and leave the resolution of the other element as is. Do you see any other reason why we can't use it? On the other side, backend solutions might offer high resolution, that's true, but they are not as flexible as client-side printing. We had it before in the backend using "mapfish" print library, a well-known printing engine. Still, we decided to transition away because the YAML templates are very complicated to design, and quite often, the print result doesn't correctly reflect what users see in the UI. I think we can consider doing a test with this library and then we can also discuss other solutions.

[cinaaaa]

@majkshkurti Thanks Majk, the main caveat of the compatibility for me was the safari support, and for the fallback solution, I don't think we can generate the same result as we have in the OffScreenCanvas solution maybe

[majkshkurti]

@cinaaaa Yes, the resolution might be the same as we have it now for Safari. That's a compromise we can do until they add support for it.

[cinaaaa]

@majkshkurti So, using the OffscreenCanvas is OK? with the inkmap tho.

[majkshkurti]

With inkmap, I would say it's okay for now