Add tm-save-dom-to-image message

plugins/tiddlywiki/geospatial/docs/save-dom-to-image.tid

@@ -0,0 +1,43 @@
+title: $:/plugins/tiddlywiki/geospatial/docs/save-dom-to-image
+caption: tm-save-dom-to-image message
+tags: $:/tags/GeospatialDocs
+
+!! `tm-save-dom-to-image` message
+
+The `tm-save-dom-to-image` message uses a [[third-party library|https://github.com/1904labs/dom-to-image-more]] to save a DOM node as an image. The image can be saved to a file or to a tiddler.
+
+Note that there are some limitations to saving content loaded from external domains due to the same-origin policy. See the documentation for more details.
+
+The following parameters are supported:
+
+|!Parameters |!Description |
+|''selector'' |CSS selector identifying the DOM node to be saved as an image (defaults to `body`) |
+|''format'' |Save format: ''png'', ''jpeg'' or ''svg'' (defaults to ''png'') |
+|''quality'' |Optional quality 0 to 1 for JPEG images (defaults to 1) |
+|''scale'' |Optional scale factor for the image (defaults to 1) |
+|''width'' |Optional width of the image in pixels |
+|''height'' |Optional height of the image in pixels |
+|''save-file'' |Optional filename to save the image to |
+|''save-title'' |Optional title of tiddler to save the image to |
+
+!! Examples
+
+<$button>
+<$action-sendmessage
+	$message="tm-save-dom-to-image"
+	selector="body.tc-body"
+	scale="2"
+	save-file="screenshot.png"
+/>
+Save the screen as an image file
+</$button>
+
+<$button>
+<$action-sendmessage
+	$message="tm-save-dom-to-image"
+	selector="body.tc-body"
+	scale="2"
+	save-title="$:/temp/screenshot.png"
+/>
+Save the screen as an image tiddler
+</$button> [[$:/temp/screenshot.png]]

plugins/tiddlywiki/geospatial/files/dom-to-image-more/LICENSE

@@ -0,0 +1,29 @@
+The MIT License (MIT)
+
+Copyright 2018 Marc Brooks
+https://about.me/idisposable
+
+Copyright 2015 Anatolii Saienko
+https://github.com/tsayen
+
+Copyright 2012 Paul Bakaus
+http://paulbakaus.com/
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

plugins/tiddlywiki/geospatial/files/dom-to-image-more/tiddlywiki.files

@@ -0,0 +1,20 @@
+{
+	"tiddlers": [
+		{
+			"file": "dom-to-image-more.min.js",
+			"fields": {
+				"type": "application/javascript",
+				"title": "$:/plugins/tiddlywiki/geospatial/dom-to-image-more.js",
+				"module-type": "library",
+				"url": "https://github.com/1904labs/dom-to-image-more"
+			}
+		},
+		{
+			"file": "LICENSE",
+			"fields": {
+				"type": "text/plain",
+				"title": "$:/plugins/tiddlywiki/geospatial/dom-to-image-more/LICENSE"
+			}
+		}
+	]
+}

plugins/tiddlywiki/geospatial/readme.tid

@@ -11,3 +11,4 @@ The Geospatial Plugin incorporates a number of third party libraries and online
 * [[TravelTime|https://traveltime.com/]], a commercial API for [[geocoding|https://traveltime.com/features/geocoding]], [[routing|https://traveltime.com/features/multi-modal-routing]] and [[isochrones|https://traveltime.com/features/isochrones]]
 * [[Flickr|https://www.flickr.com/services/api/]], a free API for retrieving geotagged photographs
 * [[OpenLocationCode|https://github.com/google/open-location-code]], Google's open source library for converting to and from Open Location Codes (also known as [[PlusCodes|https://maps.google.com/pluscodes/]])
+* [[dom-to-image-more|https://github.com/1904labs/dom-to-image-more]], an open source library for saving web content as images

plugins/tiddlywiki/geospatial/startup.js

@@ -28,6 +28,50 @@ exports.startup = function() {
 		require("$:/plugins/tiddlywiki/geospatial/leaflet.markercluster.js");	
 	}
 	// Install geolocation message handler
+	$tw.rootWidget.addEventListener("tm-save-dom-to-image",function(event) {
+		var params = event.paramObject || {},
+			domToImage = require("$:/plugins/tiddlywiki/geospatial/dom-to-image-more.js"),
+			domNode = document.querySelector(params.selector || "body.tc-body");
+		if(domNode) {
+			var method = "toPng";
+			switch(params.format) {
+				case "jpeg":
+					method = "toJpeg";
+					break;
+				case "svg":
+					method = "toSvg";
+					break;
+			}
+			domToImage[method](domNode,{
+				height: $tw.utils.parseInt(params.height) || domNode.offsetHeight,
+				width: $tw.utils.parseInt(params.width) || domNode.offsetWidth,
+				quality: $tw.utils.parseNumber(params.quality),
+				scale: $tw.utils.parseNumber(params.scale)
+			})
+			.then(function(dataUrl) {
+				// Save the image
+				if(params["save-file"]) {
+					var link = document.createElement("a");
+					link.download = params["save-file"];
+					link.href = dataUrl;
+					link.click();
+				}
+				// Save the tiddler
+				if(params["save-title"]) {
+					var parts = dataUrl.split(";base64,");
+					$tw.wiki.addTiddler(new $tw.Tiddler({
+						title: params["save-title"],
+						type: parts[0].split(":")[1],
+						"text": parts[1]
+					}));
+				}
+			})
+			.catch(function(error) {
+				console.error('oops, something went wrong!', error);
+			});
+		}
+	});
+	// Install geolocation message handler
 	$tw.rootWidget.addEventListener("tm-request-geolocation",function(event) {
 		var widget = event.widget,
 			wiki = widget.wiki || $tw.wiki,