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

editions/tw5.com/tiddlywiki.info

@@ -7,7 +7,8 @@
 		"tiddlywiki/menubar",
 		"tiddlywiki/confetti",
 		"tiddlywiki/dynannotate",
-		"tiddlywiki/tour"
+		"tiddlywiki/tour",
+		"tiddlywiki/dom-to-image"
 	],
 	"themes": [
 		"tiddlywiki/vanilla",

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

@@ -0,0 +1,64 @@
+title: $:/plugins/tiddlywiki/dom-to-image/docs
+caption: tm-save-dom-to-image message
+
+!! `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`). If multiple DOM nodes are returned by the selector then the first one is used |
+|''format'' |Save format: ''png'', ''jpeg'' or ''svg'' (defaults to ''png'') |
+|''quality'' |Optional quality 0 to 1 for JPEG images (note that the default quality is 1, and this default is applied even if the quality is explicitly specified as `0`. To force a low quality JPEG image it is therefore necessary to specify a small non-zero value such as `0.001`) |
+|''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 in PNG format
+</$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 in PNG format
+</$button> [[$:/temp/screenshot.png]]
+
+<$button>
+<$action-sendmessage
+	$message="tm-save-dom-to-image"
+	selector="body.tc-body"
+	format="jpeg"
+	scale="1"
+	quality="0.01"
+	save-title="$:/temp/screenshot.jpeg"
+/>
+Save the screen as an image tiddler in low quality JPEG format
+</$button> [[$:/temp/screenshot.jpeg]]
+
+<$button>
+<$action-sendmessage
+	$message="tm-save-dom-to-image"
+	selector="body.tc-body"
+	format="svg"
+	save-title="$:/temp/screenshot.svg"
+/>
+Save the screen as an image tiddler in SVG format
+</$button> [[$:/temp/screenshot.svg]]

plugins/tiddlywiki/dom-to-image/files/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/dom-to-image/files/tiddlywiki.files

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

plugins/tiddlywiki/dom-to-image/plugin.info

@@ -0,0 +1,7 @@
+{
+	"title": "$:/plugins/tiddlywiki/dom-to-image",
+	"name": "Dom-to-image",
+	"description": "Save DOM nodes as images",
+	"list": "readme docs",
+	"stability": "STABILITY_1_EXPERIMENTAL"
+}

plugins/tiddlywiki/dom-to-image/readme.tid

@@ -0,0 +1,3 @@
+title: $:/plugins/tiddlywiki/dom-to-image/readme
+
+* [[dom-to-image-more|https://github.com/1904labs/dom-to-image-more]], an open source library for saving web content as images

plugins/tiddlywiki/dom-to-image/startup.js

@@ -0,0 +1,78 @@
+/*\
+title: $:/plugins/tiddlywiki/dom-to-image/startup.js
+type: application/javascript
+module-type: startup
+
+dom-to-image initialisation
+
+\*/
+(function(){
+
+/*jslint node: true, browser: true */
+/*global $tw: false */
+"use strict";
+
+// Export name and synchronous status
+exports.name = "dom-to-image";
+exports.after = ["rootwidget"];
+exports.before = ["render"];
+exports.synchronous = true;
+
+exports.startup = function() {
+	$tw.rootWidget.addEventListener("tm-save-dom-to-image",function(event) {
+		var params = event.paramObject || {},
+			domToImage = require("$:/plugins/tiddlywiki/dom-to-image/dom-to-image-more.js"),
+			domNode = document.querySelector(params.selector || "body.tc-body");
+		if(domNode) {
+			var method = "toPng";
+			switch(params.format) {
+				case "jpeg":
+					// Intentional fallthrough
+				case "jpg":
+					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) || 1
+			})
+			.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"]) {
+					if(dataUrl.indexOf("data:image/svg+xml;") === 0) {
+						var commaIndex = dataUrl.indexOf(",");
+						$tw.wiki.addTiddler(new $tw.Tiddler({
+							title: params["save-title"],
+							type: "image/svg+xml",
+							"text": decodeURIComponent(dataUrl.substring(commaIndex + 1))
+						}));	
+					} else {
+						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);
+			});
+		}
+	});
+};
+
+})();

plugins/tiddlywiki/geospatial/startup.js

@@ -28,6 +28,61 @@ 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":
+					// Intentional fallthrough
+				case "jpg":
+					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) || 1
+			})
+			.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"]) {
+					if(dataUrl.indexOf("data:image/svg+xml;") === 0) {
+						var commaIndex = dataUrl.indexOf(",");
+						$tw.wiki.addTiddler(new $tw.Tiddler({
+							title: params["save-title"],
+							type: "image/svg+xml",
+							"text": decodeURIComponent(dataUrl.substring(commaIndex + 1))
+						}));	
+					} else {
+						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,