added responsiveImageData

extension/core/bg/processor.js

@@ -37,6 +37,7 @@ singlefile.processor = (() => {
 		options.canvasData = message.canvasData;
 		options.fontsData = message.fontsData;
 		options.stylesheetContents = message.stylesheetContents;
+		options.responsiveImageData = message.responsiveImageData;
 		options.imageData = message.imageData;
 		options.postersData = message.postersData;
 		options.insertSingleFileComment = true;

extension/core/content/content-autosave.js

@@ -53,6 +53,7 @@ this.singlefile.autosave = this.singlefile.autosave || (async () => {
 					canvasData: docData.canvasData,
 					fontsData: docData.fontsData,
 					stylesheetContents: docData.stylesheetContents,
+					responsiveImageData: docData.responsiveImageData,
 					imageData: docData.imageData,
 					postersData: docData.postersData,
 					framesData,
@@ -91,6 +92,7 @@ this.singlefile.autosave = this.singlefile.autosave || (async () => {
 				canvasData: docData.canvasData,
 				fontsData: docData.fontsData,
 				stylesheetContents: docData.stylesheetContents,
+				responsiveImageData: docData.responsiveImageData,
 				imageData: docData.imageData,
 				postersData: docData.postersData,
 				framesData: this.frameTree && !options.removeFrames && frameTree.getSync(options),

lib/single-file/doc-helper.js

@@ -26,6 +26,7 @@ this.docHelper = this.docHelper || (() => {
 	const PRESERVED_SPACE_ELEMENT_ATTRIBUTE_NAME = "data-single-file-preserved-space-element";
 	const WIN_ID_ATTRIBUTE_NAME = "data-frame-tree-win-id";
 	const RESPONSIVE_IMAGE_ATTRIBUTE_NAME = "data-single-file-responsive-image";
+	const IMAGE_ATTRIBUTE_NAME = "data-single-file-image";
 	const INPUT_VALUE_ATTRIBUTE_NAME = "data-single-file-value";
 
 	return {
@@ -36,6 +37,7 @@ this.docHelper = this.docHelper || (() => {
 		preservedSpaceAttributeName,
 		removedContentAttributeName,
 		responsiveImagesAttributeName,
+		imagesAttributeName,
 		inputValueAttributeName
 	};
 
@@ -69,6 +71,7 @@ this.docHelper = this.docHelper || (() => {
 			canvasData: getCanvasData(doc),
 			fontsData: getFontsData(doc),
 			stylesheetContents: getStylesheetContents(doc),
+			responsiveImageData: getResponsiveImageData(doc, options),
 			imageData: getImageData(doc, options),
 			postersData: getPostersData(doc)
 		};
@@ -88,6 +91,7 @@ this.docHelper = this.docHelper || (() => {
 			doc.querySelectorAll("[" + preservedSpaceAttributeName(options.sessionId) + "]").forEach(element => element.removeAttribute(preservedSpaceAttributeName(options.sessionId)));
 		}
 		doc.querySelectorAll("[" + responsiveImagesAttributeName(options.sessionId) + "]").forEach(element => element.removeAttribute(responsiveImagesAttributeName(options.sessionId)));
+		doc.querySelectorAll("[" + imagesAttributeName(options.sessionId) + "]").forEach(element => element.removeAttribute(imagesAttributeName(options.sessionId)));
 		doc.querySelectorAll("[" + inputValueAttributeName(options.sessionId) + "]").forEach(element => element.removeAttribute(inputValueAttributeName(options.sessionId)));
 	}
 
@@ -95,6 +99,10 @@ this.docHelper = this.docHelper || (() => {
 		return RESPONSIVE_IMAGE_ATTRIBUTE_NAME + (sessionId ? "-" + sessionId : "");
 	}
 
+	function imagesAttributeName(sessionId) {
+		return IMAGE_ATTRIBUTE_NAME + (sessionId ? "-" + sessionId : "");
+	}
+
 	function preservedSpaceAttributeName(sessionId) {
 		return PRESERVED_SPACE_ELEMENT_ATTRIBUTE_NAME + (sessionId ? "-" + sessionId : "");
 	}
@@ -148,6 +156,28 @@ this.docHelper = this.docHelper || (() => {
 	}
 
 	function getImageData(doc, options) {
+		if (doc) {
+			const data = [];
+			doc.querySelectorAll("img[src]").forEach((imageElement, imageElementIndex) => {
+				imageElement.setAttribute(imagesAttributeName(options.sessionId), imageElementIndex);
+				let imageData;
+				if (imageElement.src) {
+					imageData = {
+						width: imageElement.width,
+						height: imageElement.height,
+						clientWidth: imageElement.clientWidth,
+						clientHeight: imageElement.clientHeight,
+						naturalWidth: imageElement.naturalWidth,
+						naturalHeight: imageElement.naturalHeight						
+					};
+				}
+				data.push(imageData);
+			});
+			return data;
+		}
+	}
+
+	function getResponsiveImageData(doc, options) {
 		if (doc) {
 			const data = [];
 			doc.querySelectorAll("picture, img[srcset]").forEach((element, elementIndex) => {

lib/single-file/frame-tree.js

@@ -90,6 +90,7 @@ this.frameTree = this.frameTree || (() => {
 				frameData.baseURI = messageFrameData.baseURI;
 				frameData.title = messageFrameData.title;
 				frameData.stylesheetContents = messageFrameData.stylesheetContents;
+				frameData.responsiveImageData = messageFrameData.responsiveImageData;
 				frameData.imageData = messageFrameData.imageData;
 				frameData.postersData = messageFrameData.postersData;
 				frameData.canvasData = messageFrameData.canvasData;
@@ -180,6 +181,7 @@ this.frameTree = this.frameTree || (() => {
 			baseURI,
 			title: document.title,
 			stylesheetContents: docData.stylesheetContents,
+			responsiveImageData: docData.responsiveImageData,
 			imageData: docData.imageData,
 			postersData: docData.postersData,
 			canvasData: docData.canvasData,

lib/single-file/single-file-browser.js

@@ -244,6 +244,10 @@ this.SingleFile = this.SingleFile || (() => {
 			return docHelper.responsiveImagesAttributeName(sessionId);
 		}
 
+		static imagesAttributeName(sessionId) {
+			return docHelper.imagesAttributeName(sessionId);
+		}
+
 		static inputValueAttributeName(sessionId) {
 			return docHelper.inputValueAttributeName(sessionId);
 		}

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

@@ -136,6 +136,7 @@ this.SingleFileCore = this.SingleFileCore || (() => {
 				this.options.canvasData = docData.canvasData;
 				this.options.fontsData = docData.fontsData;
 				this.options.stylesheetContents = docData.stylesheetContents;
+				this.options.responsiveImageData = docData.responsiveImageData;
 				this.options.imageData = docData.imageData;
 				this.options.postersData = docData.postersData;
 			}
@@ -506,25 +507,25 @@ this.SingleFileCore = this.SingleFileCore || (() => {
 			this.doc.querySelectorAll("picture, img[srcset]").forEach(element => {
 				const tagName = element.tagName.toLowerCase();
 				const dataAttributeName = DOM.responsiveImagesAttributeName(this.options.sessionId);
-				const imageData = this.options.imageData[Number(element.getAttribute(dataAttributeName))];
+				const responsiveImageData = this.options.responsiveImageData[Number(element.getAttribute(dataAttributeName))];
 				element.removeAttribute(dataAttributeName);
-				if (imageData) {
+				if (responsiveImageData) {
 					if (tagName == "img") {
-						if (imageData.source.src && imageData.source.naturalWidth > 1 && imageData.source.naturalHeight > 1) {
+						if (responsiveImageData.source.src && responsiveImageData.source.naturalWidth > 1 && responsiveImageData.source.naturalHeight > 1) {
 							element.removeAttribute("srcset");
 							element.removeAttribute("sizes");
-							element.src = imageData.source.src;
+							element.src = responsiveImageData.source.src;
 						}
 					}
 					if (tagName == "picture") {
 						const imageElement = element.querySelector("img");
-						if (imageData.source && imageData.source.src && imageData.source.naturalWidth > 1 && imageData.source.naturalHeight > 1) {
+						if (responsiveImageData.source && responsiveImageData.source.src && responsiveImageData.source.naturalWidth > 1 && responsiveImageData.source.naturalHeight > 1) {
 							imageElement.removeAttribute("srcset");
 							imageElement.removeAttribute("sizes");
-							imageElement.src = imageData.source.src;
+							imageElement.src = responsiveImageData.source.src;
 							element.querySelectorAll("source").forEach(sourceElement => sourceElement.remove());
 						} else {
-							if (imageData.sources) {
+							if (responsiveImageData.sources) {
 								element.querySelectorAll("source").forEach(sourceElement => {
 									if (!sourceElement.srcset && !sourceElement.dataset.srcset && !sourceElement.src) {
 										sourceElement.remove();