process canvas elements

extension/core/scripts/content/client.js

@@ -53,12 +53,25 @@
 			markSelectedContent();
 		}
 		options.content = getDoctype(document) + document.documentElement.outerHTML;
+		options.canvasData = getCanvasData();
 		document.querySelectorAll("[" + SELECTED_CONTENT_ATTRIBUTE_NAME + "]").forEach(selectedContent => selectedContent.removeAttribute(SELECTED_CONTENT_ATTRIBUTE_NAME));
 		options.jsEnabled = true;
 		options.onprogress = onProgress;
 		return options;
 	}
 
+	function getCanvasData() {
+		const canvasData = [];
+		Array.prototype.forEach.call(document.querySelectorAll("canvas"), canvasElement => {
+			try {
+				canvasData.push({ dataURI: canvasElement.toDataURL("image/png", ""), width: canvasElement.clientWidth, height: canvasElement.clientHeight });
+			} catch (e) {
+				canvasData.push(null);
+			}
+		});
+		return canvasData;
+	}
+
 	function markSelectedContent() {
 		const selection = getSelection();
 		const range = selection.rangeCount ? selection.getRangeAt(0) : null;

lib/single-file/single-file-core.js

@@ -85,6 +85,7 @@ const SingleFileCore = (() => {
 			this.processor.insertFaviconLink();
 			this.processor.resolveHrefs();
 			this.processor.insertSingleFileCommentNode();
+			this.processor.replaceCanvasElements();
 			if (this.options.removeHiddenElements) {
 				this.processor.removeHiddenElements();
 			}
@@ -321,6 +322,30 @@ const SingleFileCore = (() => {
 			this.doc.documentElement.insertBefore(commentNode, this.doc.documentElement.firstChild);
 		}
 
+		replaceCanvasElements() {
+			if (this.options.canvasData) {
+				this.doc.querySelectorAll("canvas").forEach((canvasElement, indexCanvasElement) => {
+					const canvasData = this.options.canvasData[indexCanvasElement];
+					if (canvasData) {
+						const imgElement = this.doc.createElement("img");
+						imgElement.setAttribute("src", canvasData.dataURI);
+						Array.from(canvasElement.attributes).forEach(attribute => {
+							if (attribute.value) {
+								imgElement.setAttribute(attribute.name, attribute.value);
+							}
+						});
+						if (!imgElement.width && canvasData.width) {
+							imgElement.style.pixelWidth = canvasData.width;
+						}
+						if (!imgElement.height && canvasData.height) {
+							imgElement.style.pixelHeight = canvasData.height;
+						}
+						canvasElement.parentElement.replaceChild(imgElement, canvasElement);
+					}
+				});
+			}
+		}
+
 		async pageResources() {
 			await Promise.all([
 				DomProcessorHelper.processAttribute(this.doc.querySelectorAll("link[href][rel*=\"icon\"]"), "href", this.baseURI),