Browse Source

compute natuarlWidth and natualHeight for SVG images on Firefox

Gildas 7 years ago
parent
commit
e6abfcdcad
2 changed files with 19 additions and 4 deletions
  1. 15 2
      lib/single-file/doc-helper.js
  2. 4 2
      lib/single-file/html-images-minifier.js

+ 15 - 2
lib/single-file/doc-helper.js

@@ -162,13 +162,26 @@ this.docHelper = this.docHelper || (() => {
 				imageElement.setAttribute(imagesAttributeName(options.sessionId), imageElementIndex);
 				let imageData;
 				if (imageElement.src) {
+					let naturalWidth = imageElement.naturalWidth;
+					let naturalHeight = imageElement.naturalHeight;
+					let preserveAspectRatio = false;
+					if (naturalWidth <= 1 && naturalHeight <= 1) {
+						const imgElement = doc.createElement("img");
+						imgElement.src = imageElement.src;
+						doc.body.appendChild(imgElement);
+						naturalWidth = imgElement.width;
+						naturalHeight = imgElement.height;
+						preserveAspectRatio = true;
+						imgElement.remove();
+					}
 					imageData = {
 						width: imageElement.width,
 						height: imageElement.height,
 						clientWidth: imageElement.clientWidth,
 						clientHeight: imageElement.clientHeight,
-						naturalWidth: imageElement.naturalWidth,
-						naturalHeight: imageElement.naturalHeight						
+						naturalWidth,
+						naturalHeight,
+						preserveAspectRatio
 					};
 				}
 				data.push(imageData);

+ 4 - 2
lib/single-file/html-images-minifier.js

@@ -114,7 +114,9 @@ this.imagesMinifier = this.imagesMinifier || (() => {
 						svgElement.setAttributeNS(SVG_NS, "viewBox", "0 0 " + width + " " + height);
 						svgElement.setAttributeNS(SVG_NS, "width", imageData.clientWidth);
 						svgElement.setAttributeNS(SVG_NS, "height", imageData.clientHeight);
-						svgElement.setAttributeNS(SVG_NS, "preserveAspectRatio", "none");
+						if (!imageData.preserveAspectRatio) {
+							svgElement.setAttributeNS(SVG_NS, "preserveAspectRatio", "none");
+						}
 						useElement.setAttributeNS(SVG_NS, "xlink:href", "#single-file-" + urlIndex);
 						const imageElement = doc.getElementById("single-file-" + urlIndex);
 						if (!imageElement.getAttributeNS(SVG_NS, "width") && !imageElement.getAttributeNS(SVG_NS, "height")) {
@@ -122,7 +124,7 @@ this.imagesMinifier = this.imagesMinifier || (() => {
 							imageElement.setAttributeNS(SVG_NS, "width", width);
 							imageElement.setAttributeNS(SVG_NS, "height", height);
 						}
-						// svgElement.style.border = "1px solid red";
+						svgElement.style.border = "1px solid red";
 						imgElement.parentElement.replaceChild(svgElement, imgElement);
 					}