better handling of grouped images when no padding is set

lib/single-file/doc-helper.js

@@ -130,7 +130,8 @@ this.docHelper = this.docHelper || (() => {
 			const canvasData = [];
 			doc.querySelectorAll("canvas").forEach(canvasElement => {
 				try {
-					canvasData.push({ dataURI: canvasElement.toDataURL("image/png", ""), width: canvasElement.clientWidth, height: canvasElement.clientHeight });
+					const size = getSize(canvasElement);
+					canvasData.push({ dataURI: canvasElement.toDataURL("image/png", ""), width: size.width, height: size.height });
 				} catch (error) {
 					canvasData.push(null);
 				}
@@ -187,8 +188,10 @@ this.docHelper = this.docHelper || (() => {
 		const height = imageElement.clientHeight;
 		if (width >= 0 && height >= 0 && paddingLeft >= 0 && paddingRight >= 0 && paddingTop >= 0 && paddingBottom >= 0) {
 			return {
-				width: Math.ceil(width - paddingLeft - paddingRight),
-				height: Math.floor(height - paddingTop - paddingBottom),
+				width: (paddingLeft || paddingRight) && (width - paddingLeft - paddingRight) + "px",
+				pxWidth: Math.round(width - paddingLeft - paddingRight),
+				height: (paddingLeft || paddingRight) && (height - paddingTop - paddingBottom) + "px",
+				pxHeight: Math.round(height - paddingTop - paddingBottom),
 			};
 		}
 	}

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

@@ -604,14 +604,7 @@ this.SingleFileCore = this.SingleFileCore || (() => {
 				this.doc.querySelectorAll("canvas").forEach((canvasElement, indexCanvasElement) => {
 					const canvasData = this.options.canvasData[indexCanvasElement];
 					if (canvasData) {
-						canvasElement.style.setProperty("background-blend-mode", "normal");
-						canvasElement.style.setProperty("background-clip", "border-box");
-						canvasElement.style.setProperty("background-position", "0%");
-						canvasElement.style.setProperty("background-color", "transparent", "important");
-						canvasElement.style.setProperty("background-image", "url(" + canvasData.dataURI + ")", "important");
-						canvasElement.style.setProperty("background-size", `${canvasData.width}px ${canvasData.height}px`, "important");
-						canvasElement.style.setProperty("background-origin", "content-box", "important");
-						canvasElement.style.setProperty("background-repeat", "no-repeat", "important");
+						DomProcessorHelper.setBackgroundImage(canvasElement, { url: "url(" + canvasData.dataURI + ")", width: canvasData.width, height: canvasData.height });
 						this.stats.add("processed", "canvas", 1);
 					}
 				});
@@ -905,6 +898,24 @@ this.SingleFileCore = this.SingleFileCore || (() => {
 			return filename;
 		}
 
+		static setBackgroundImage(element, imageData) {
+			element.style.setProperty("background-blend-mode", "normal");
+			element.style.setProperty("background-clip", "border-box");
+			element.style.setProperty("background-position", "0%");
+			element.style.setProperty("background-color", "transparent", "important");
+			element.style.setProperty("background-image", imageData.url, "important");
+			let width = imageData.width, height = imageData.height;
+			if (!imageData.width) {
+				width = "100%";
+			}
+			if (!imageData.height) {
+				height = "auto";
+			}
+			element.style.setProperty("background-size", `${width} ${height}`, "important");
+			element.style.setProperty("background-origin", "content-box", "important");
+			element.style.setProperty("background-repeat", "no-repeat", "important");
+		}
+
 		static setFrameEmptySrc(frameElement) {
 			if (frameElement.tagName == "OBJECT") {
 				frameElement.setAttribute("data", "data:text/html,");
@@ -1315,11 +1326,8 @@ this.SingleFileCore = this.SingleFileCore || (() => {
 			const dataAttributeName = DOM.imagesAttributeName(options.sessionId);
 			if (imgElement.getAttribute(dataAttributeName) != null) {
 				const imgData = options.imageData[Number(imgElement.getAttribute(dataAttributeName))];
-				imgElement.setAttribute("src", `data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="${imgData.width}" height="${imgData.height}"><rect fill-opacity="0"/></svg>`);
-				imgElement.style.setProperty("background-image", "var(" + variableName + ")", "important");
-				imgElement.style.setProperty("background-size", `${imgData.width}px ${imgData.height}px`, "important");
-				imgElement.style.setProperty("background-origin", "content-box", "important");
-				imgElement.style.setProperty("background-repeat", "no-repeat", "important");
+				imgElement.setAttribute("src", `data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="${imgData.pxWidth}" height="${imgData.pxHeight}"><rect fill-opacity="0"/></svg>`);
+				DomProcessorHelper.setBackgroundImage(imgElement, { url: "var(" + variableName + ")", width: imgData.width, height: imgData.height });
 				imgElement.removeAttribute(dataAttributeName);
 				return true;
 			}