Support percentage size for image #188

Author: onizet

examples/Demo/Demo.csproj

@@ -21,6 +21,7 @@
 
   <ItemGroup>
     <EmbeddedResource Include="Resources\*" />
+    <Content Include="images\*" CopyToOutputDirectory="PreserveNewest"/>
   </ItemGroup>
 
 </Project>

examples/Demo/Resources/LargeImg.html

@@ -0,0 +1 @@
+<img src="The-Song-of-the-World.jpg" style="max-width:100%"/>

examples/Demo/app.config

@@ -56,9 +56,14 @@ class ImageExpression(IHtmlImageElement node) : ImageExpressionBase(node)
         }
         if (imgNode.DisplayHeight > 0)
         {
-            // Image perspective skewed. Bug fixed by ddeforge on github.com/onizet/html2openxml/discussions/350500
             preferredSize.Height = imgNode.DisplayHeight;
         }
+        if (preferredSize.IsEmpty)
+        {
+            var styles = imgNode.GetStyles();
+            preferredSize.Width = GetDimension(styles, "width", "max-width", 642);
+            preferredSize.Height = GetDimension(styles, "height", "max-height", 428);
+        }
 
         HtmlImageInfo? iinfo = context.ImageLoader.Download(src, CancellationToken.None)
             .ConfigureAwait(false).GetAwaiter().GetResult();
@@ -85,6 +90,7 @@ class ImageExpression(IHtmlImageElement node) : ImageExpressionBase(node)
         else if (preferredSize.Width <= 0 || preferredSize.Height <= 0)
         {
             Size actualSize = iinfo.Size;
+            // Image perspective skewed. Bug fixed by ddeforge on github.com/onizet/html2openxml/discussions/350500
             preferredSize = ImageHeader.KeepAspectRatio(actualSize, preferredSize);
         }
 
@@ -130,4 +136,22 @@ class ImageExpression(IHtmlImageElement node) : ImageExpressionBase(node)
 
         return img;
     }
+
+    private static int GetDimension(HtmlAttributeCollection styles, string primaryStyle, string fallbackStyle, int percentageBase)
+    {
+        var unit = styles.GetUnit(primaryStyle);
+        if (!unit.IsValid)
+        {
+            unit = styles.GetUnit(fallbackStyle);
+        }
+
+        if (unit.IsValid)
+        {
+            return unit.Type == UnitMetric.Percent?
+                (int)(unit.Value * percentageBase / 100) :
+                unit.ValueInPx;
+        }
+
+        return 0;
+    }
 }

examples/Demo/images/The-Song-of-the-World.jpg

@@ -16,11 +16,11 @@ namespace HtmlToOpenXml.Tests
     public class ImgTests : HtmlConverterTestBase
     {
         [TestCase("https://www.w3schools.com/tags/smiley.gif", "image/gif")]
-        [TestCase("https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Introduction/dino.svg", "image/svg+xml")]
+        [TestCase("https://upload.wikimedia.org/wikipedia/commons/b/b0/Mozilla_dinosaur_head_logo.svg", "image/svg+xml")]
         public async Task AbsoluteUri_ReturnsDrawing_WithDownloadedData(string imageUri, string contentType)
         {
             await converter.ParseBody(
-                @$"<img src='{imageUri}' alt='Smiley face' width='42' height='42'>",
+                @$"<img src='{imageUri}' width='42' height='42'>",
                 TestContext.CurrentContext.CancellationToken);
 
             var paragraphs = mainPart.Document.Body!.Elements<Paragraph>();
@@ -40,14 +40,24 @@ public void DataUri_ReturnsDrawing_WithDecryptedData()
         [Test]
         public void WithBorder_ReturnsRunWithBorder()
         {
-            var elements = converter.Parse(@"<img src='https://www.w3schools.com/tags/smiley.gif' border='1'>");
+            var elements = converter.Parse(@"<img border='1' src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg=='>");
             AssertIsImg(mainPart, elements[0]);
             var run = elements[0].GetFirstChild<Run>();
             var runProperties = run?.GetFirstChild<RunProperties>();
             Assert.That(runProperties, Is.Not.Null);
             Assert.That(runProperties.Border, Is.Not.Null);
         }
 
+        [Test]
+        public void PercentageSize_ReturnsDrawing_WithSizeRelativeToPage()
+        {
+            var elements = converter.Parse(@"<img src='data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==' style='max-width:100%'>");
+            AssertIsImg(mainPart, elements[0]);
+            var drawing = elements[0].GetFirstChild<Run>()!.GetFirstChild<Drawing>()!;
+            Assert.That(drawing.Inline?.Extent?.Cx?.Value, Is.EqualTo(6115050));
+            Assert.That(drawing.Inline?.Extent?.Cy?.Value, Is.EqualTo(6115050));
+        }
+
         [Test]
         public void ManualProvisioning_ReturnsDrawing_WithProvidedData()
         {