Include scale bar in screenshots

[daniel-wer]

Was easier than thought :) The lines added only stem from me adding new lines between functions in the utils module.

These are automatic screenshots made using the webKnossos functionality:

URL of deployed dev instance (used for testing):

• https://includescalebarinscreenshots.webknossos.xyz

Steps to test:

• Press Q or select "Screenshot" from the menu. The scale bar should be included in the screenshots if it was activated. The 3d view buttons should not be included.

Issues:

• fixes Scale bar is not saved with the screenshot #3978

---

(Please delete unneeded items, merge only when none are left open)

• Updated (unreleased) changelog
• Ready for review

[daniel-wer]

I did not find a workaround for the "blurry" lines of the scale bar. It seems to depend on the screen resolution and size of the viewports. Also happens without the transparent background or with z-index set 🤷 I don't think it's a blocker, but feel free to test yourself if you have any additional ideas :)

[philippotto]

Awesome 🕺 By the way, on my setup, there are no blurry lines in the screenshots :)

[daniel-wer]

By the way, on my setup, there are no blurry lines in the screenshots :)

Interesting. I suspected the 200% scaling of my Hi-DPI screen to cause the blurry lines, but that's not the case. Instead, I noticed that the overlay did not work on Hi-DPI screens with a devicePixelRatio > 1. Was easy to fix and I added a note to the data canvas Hi-DPI issue to remove this workaround again if we ever complete said issue.