New dom-to-image plugin for saving DOM nodes as an image

[Jermolene]

The motivation is to be able to save maps generated by Leaflet.js as PNG, JPEG or SVG images, which is not natively supported by Leaflet. This PR uses the library https://github.com/1904labs/dom-to-image-more to provide the underlying functionality.

[github-actions]

Confirmed: Jermolene has already signed the Contributor License Agreement (see contributing.md)

[netlify]

✅ Deploy Preview for tiddlywiki-previews ready!

Name	Link
🔨 Latest commit	41c7948
🔍 Latest deploy log	https://app.netlify.com/sites/tiddlywiki-previews/deploys/67668ecec0f10000083d2dda
😎 Deploy Preview	https://deploy-preview-8810--tiddlywiki-previews.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[Jermolene]

To try the feature out, visit the preview here, and then scroll down and click the button "Save the screen as an image tiddler". After a second or two, the link to $:/temp/screenshot.png should change to indicate that the tiddler exists. You can then click the link to inspect the screenshot.

[pmario]

Should it be possible to store SVGs. It did not work for me. Is there something special to save SVGs

[Jermolene]

Should it be possible to store SVGs. It did not work for me. Is there something special to save SVGs

Thanks @pmario I've just pushed a fix to saving in SVG format, let me know how you get on.

[pmario]

It seems to work now. I was just curious, how the SVG code would look like. The resulting SVG is very large, but also very interesting. The resulting code seems to be very verbose. It seems to contain a lot of redundant information, that could probably be optimized. -- but SVG-Optimizer can not handle the code :/

So it would probably be needed to request that feature upstream. -- As I wrote -- I was just curious.

[Jermolene]

It seems to work now. I was just curious, how the SVG code would look like. The resulting SVG is very large, but also very interesting. The resulting code seems to be very verbose. It seems to contain a lot of redundant information, that could probably be optimized. -- but SVG-Optimizer can not handle the code :/

So it would probably be needed to request that feature upstream. -- As I wrote -- I was just curious.

Yes indeed. It is a truly fantastic hack; if you think about it, it is a complete web renderer written in JavaScript that with optimisations based on the host engine. There are some annoying issues with CORS that will frustrate a lot of people, as usual.

One question is whether it is appropriate to bury this functionality within the geospatial plugin. There's no dependency beyond the fact that the functionality is useful when used together. The alternative would be to ship it as a new plugin of its own.

[pmario]

One question is whether it is appropriate to bury this functionality within the geospatial plugin. There's no dependency beyond the fact that the functionality is useful when used together. The alternative would be to ship it as a new plugin of its own.

hmmm, I think it would make sense as a new plugin. I usually need to make screenshots from tiddlers using an external tool. Usually that's good enough, but it will not allow me to create screenshots, that are longer than one screen size.

This library allows us to create images larger than one screen height.

[Jermolene]

Updated my earlier post to correct the link to the preview