Image Fixes

-Implemented image loading using HttpClient -Added demo resources images to console program -Moved sample test png expected location out of root c: folder. Ideally this should be something less platform specific, but haven't crossed that bridge yet.
mstancombe · Dec 9, 2023 · 9e6cf7b · 9e6cf7b
1 parent 688e6c5
commit 9e6cf7b
Show file tree

Hide file tree

Showing 10 changed files with 110 additions and 128 deletions.
diff --git a/Source/Demos/HtmlRenderer.Demo.Common/TestSamples/06.External Image.htm b/Source/Demos/HtmlRenderer.Demo.Common/TestSamples/06.External Image.htm
@@ -3,12 +3,12 @@
         <div>
             Local File:
         </div>
-        <img height="100" src="c:\test.png"/>
+        <img height="100" src="c:\temp\test.png"/>
         <hr/>
         <div>
             From web:
         </div>
-        <img height="100" src="http://www.canadianpetconnection.com/wp-content/uploads/2011/09/Cats1.jpg"/>
+        <img height="100" src="https://upload.wikimedia.org/wikipedia/commons/2/25/Siam_lilacpoint.jpg"/>
         <hr />
         <div>
             GIF:
@@ -21,6 +21,6 @@
         <img height="100" byevent="1000"/>
         <br/>
         <br/>
-        <img style="width: 100%" src="http://www.canadianpetconnection.com/wp-content/uploads/2011/09/Cats1.jpg"/>
+        <img style="width: 100%" src="https://upload.wikimedia.org/wikipedia/commons/2/25/Siam_lilacpoint.jpg"/>
     </body>
 </html>
diff --git a/Source/Demos/HtmlRenderer.Demo.Common/TestSamples/15.MaxWidth.htm b/Source/Demos/HtmlRenderer.Demo.Common/TestSamples/15.MaxWidth.htm
@@ -26,10 +26,10 @@ <h2>
                 metus. Integer leo dolor, tristique a, dignissim ac, iaculis eget, elit. Donec arcu.
             </p>
             <div>The image should also be limited by size because it has: <code><span color="red">style</span><span color="blue">="</span><span color="maroon">width</span><span color="blue">:90%"</span></code></div>
-            <img style="width: 90%" src="http://www.canadianpetconnection.com/wp-content/uploads/2011/09/Cats1.jpg"/>
-            <img style="width: 500px; max-width: 90%" src="http://www.canadianpetconnection.com/wp-content/uploads/2011/09/Cats1.jpg"/>
+            <img style="width: 90%" src="https://upload.wikimedia.org/wikipedia/commons/2/25/Siam_lilacpoint.jpg"/>
+            <img style="width: 500px; max-width: 90%" src="https://upload.wikimedia.org/wikipedia/commons/2/25/Siam_lilacpoint.jpg"/>
             <p style="margin: 0 200px">
-                <img style="width: 500px; max-width: 90%" src="http://www.canadianpetconnection.com/wp-content/uploads/2011/09/Cats1.jpg"/>
+                <img style="width: 500px; max-width: 90%" src="https://upload.wikimedia.org/wikipedia/commons/2/25/Siam_lilacpoint.jpg"/>
             </p>
         </div>
     </body>

diff --git a/Source/Demos/HtmlRenderer.Demo.Common/TestSamples/19.Many images.htm b/Source/Demos/HtmlRenderer.Demo.Common/TestSamples/19.Many images.htm
@@ -2,102 +2,102 @@
     <body>
         <h2>Contains many images that should not load until in scroll view</h2>
         <h3>Image</h3>
-        <img width="500" src="http://www.canadianpetconnection.com/wp-content/uploads/2011/09/Cats1.jpg" />
+        <img width="500" src="https://upload.wikimedia.org/wikipedia/commons/2/25/Siam_lilacpoint.jpg" />
         <h3>Another image</h3>
-        <img width="500" src="http://www.canadianpetconnection.com/wp-content/uploads/2011/09/Cats1.jpg" />
+        <img width="500" src="https://upload.wikimedia.org/wikipedia/commons/2/25/Siam_lilacpoint.jpg" />
         <h3>Another image</h3>
-        <img width="500" src="http://www.canadianpetconnection.com/wp-content/uploads/2011/09/Cats1.jpg" />
+        <img width="500" src="https://upload.wikimedia.org/wikipedia/commons/2/25/Siam_lilacpoint.jpg" />
         <h3>Another image</h3>
-        <img width="500" src="http://www.canadianpetconnection.com/wp-content/uploads/2011/09/Cats1.jpg" />
+        <img width="500" src="https://upload.wikimedia.org/wikipedia/commons/2/25/Siam_lilacpoint.jpg" />
         <h3>Another image</h3>
-        <img width="500" src="http://www.canadianpetconnection.com/wp-content/uploads/2011/09/Cats1.jpg" />
+        <img width="500" src="https://upload.wikimedia.org/wikipedia/commons/2/25/Siam_lilacpoint.jpg" />
         <h3>Another image</h3>
-        <img width="500" src="http://www.canadianpetconnection.com/wp-content/uploads/2011/09/Cats1.jpg" />
+        <img width="500" src="https://upload.wikimedia.org/wikipedia/commons/2/25/Siam_lilacpoint.jpg" />
         <h3>Another image</h3>
-        <img width="500" src="http://www.canadianpetconnection.com/wp-content/uploads/2011/09/Cats1.jpg" />
+        <img width="500" src="https://upload.wikimedia.org/wikipedia/commons/2/25/Siam_lilacpoint.jpg" />
         <h3>Another image</h3>
-        <img width="500" src="http://www.canadianpetconnection.com/wp-content/uploads/2011/09/Cats1.jpg" />
+        <img width="500" src="https://upload.wikimedia.org/wikipedia/commons/2/25/Siam_lilacpoint.jpg" />
         <h3>Another image</h3>
-        <img width="500" src="http://www.canadianpetconnection.com/wp-content/uploads/2011/09/Cats1.jpg" />
+        <img width="500" src="https://upload.wikimedia.org/wikipedia/commons/2/25/Siam_lilacpoint.jpg" />
         <h3>Another image</h3>
-        <img width="500" src="http://www.canadianpetconnection.com/wp-content/uploads/2011/09/Cats1.jpg" />
+        <img width="500" src="https://upload.wikimedia.org/wikipedia/commons/2/25/Siam_lilacpoint.jpg" />
         <h3>Another image</h3>
-        <img width="500" src="http://www.canadianpetconnection.com/wp-content/uploads/2011/09/Cats1.jpg" />
+        <img width="500" src="https://upload.wikimedia.org/wikipedia/commons/2/25/Siam_lilacpoint.jpg" />
         <h3>Another image</h3>
-        <img width="500" src="http://www.canadianpetconnection.com/wp-content/uploads/2011/09/Cats1.jpg" />
+        <img width="500" src="https://upload.wikimedia.org/wikipedia/commons/2/25/Siam_lilacpoint.jpg" />
         <h3>Another image</h3>
-        <img width="500" src="http://www.canadianpetconnection.com/wp-content/uploads/2011/09/Cats1.jpg" />
+        <img width="500" src="https://upload.wikimedia.org/wikipedia/commons/2/25/Siam_lilacpoint.jpg" />
         <h3>Another image</h3>
-        <img width="500" src="http://www.canadianpetconnection.com/wp-content/uploads/2011/09/Cats1.jpg" />
+        <img width="500" src="https://upload.wikimedia.org/wikipedia/commons/2/25/Siam_lilacpoint.jpg" />
         <h3>Another image</h3>
-        <img width="500" src="http://www.canadianpetconnection.com/wp-content/uploads/2011/09/Cats1.jpg" />
+        <img width="500" src="https://upload.wikimedia.org/wikipedia/commons/2/25/Siam_lilacpoint.jpg" />
         <h3>Another image</h3>
-        <img width="500" src="http://www.canadianpetconnection.com/wp-content/uploads/2011/09/Cats1.jpg" />
+        <img width="500" src="https://upload.wikimedia.org/wikipedia/commons/2/25/Siam_lilacpoint.jpg" />
         <h3>Another image</h3>
-        <img width="500" src="http://www.canadianpetconnection.com/wp-content/uploads/2011/09/Cats1.jpg" />
+        <img width="500" src="https://upload.wikimedia.org/wikipedia/commons/2/25/Siam_lilacpoint.jpg" />
         <h3>Another image</h3>
-        <img width="500" src="http://www.canadianpetconnection.com/wp-content/uploads/2011/09/Cats1.jpg" />
+        <img width="500" src="https://upload.wikimedia.org/wikipedia/commons/2/25/Siam_lilacpoint.jpg" />
         <h3>Another image</h3>
-        <img width="500" src="http://www.canadianpetconnection.com/wp-content/uploads/2011/09/Cats1.jpg" />
+        <img width="500" src="https://upload.wikimedia.org/wikipedia/commons/2/25/Siam_lilacpoint.jpg" />
         <h3>Another image</h3>
-        <img width="500" src="http://www.canadianpetconnection.com/wp-content/uploads/2011/09/Cats1.jpg" />
+        <img width="500" src="https://upload.wikimedia.org/wikipedia/commons/2/25/Siam_lilacpoint.jpg" />
         <h3>Another image</h3>
-        <img width="500" src="http://www.canadianpetconnection.com/wp-content/uploads/2011/09/Cats1.jpg" />
+        <img width="500" src="https://upload.wikimedia.org/wikipedia/commons/2/25/Siam_lilacpoint.jpg" />
         <h3>Another image</h3>
-        <img width="500" src="http://www.canadianpetconnection.com/wp-content/uploads/2011/09/Cats1.jpg" />
+        <img width="500" src="https://upload.wikimedia.org/wikipedia/commons/2/25/Siam_lilacpoint.jpg" />
         <h3>Another image</h3>
-        <img width="500" src="http://www.canadianpetconnection.com/wp-content/uploads/2011/09/Cats1.jpg" />
+        <img width="500" src="https://upload.wikimedia.org/wikipedia/commons/2/25/Siam_lilacpoint.jpg" />
         <h3>Another image</h3>
-        <img width="500" src="http://www.canadianpetconnection.com/wp-content/uploads/2011/09/Cats1.jpg" />
+        <img width="500" src="https://upload.wikimedia.org/wikipedia/commons/2/25/Siam_lilacpoint.jpg" />
         <h3>Another image</h3>
-        <img width="500" src="http://www.canadianpetconnection.com/wp-content/uploads/2011/09/Cats1.jpg" />
+        <img width="500" src="https://upload.wikimedia.org/wikipedia/commons/2/25/Siam_lilacpoint.jpg" />
         <h3>Another image</h3>
-        <img width="500" src="http://www.canadianpetconnection.com/wp-content/uploads/2011/09/Cats1.jpg" />
+        <img width="500" src="https://upload.wikimedia.org/wikipedia/commons/2/25/Siam_lilacpoint.jpg" />
         <h3>Another image</h3>
-        <img width="500" src="http://www.canadianpetconnection.com/wp-content/uploads/2011/09/Cats1.jpg" />
+        <img width="500" src="https://upload.wikimedia.org/wikipedia/commons/2/25/Siam_lilacpoint.jpg" />
         <h3>Another image</h3>
-        <img width="500" src="http://www.canadianpetconnection.com/wp-content/uploads/2011/09/Cats1.jpg" />
+        <img width="500" src="https://upload.wikimedia.org/wikipedia/commons/2/25/Siam_lilacpoint.jpg" />
         <h3>Another image</h3>
-        <img width="500" src="http://www.canadianpetconnection.com/wp-content/uploads/2011/09/Cats1.jpg" />
+        <img width="500" src="https://upload.wikimedia.org/wikipedia/commons/2/25/Siam_lilacpoint.jpg" />
         <h3>Another image</h3>
-        <img width="500" src="http://www.canadianpetconnection.com/wp-content/uploads/2011/09/Cats1.jpg" />
+        <img width="500" src="https://upload.wikimedia.org/wikipedia/commons/2/25/Siam_lilacpoint.jpg" />
         <h3>Another image</h3>
-        <img width="500" src="http://www.canadianpetconnection.com/wp-content/uploads/2011/09/Cats1.jpg" />
+        <img width="500" src="https://upload.wikimedia.org/wikipedia/commons/2/25/Siam_lilacpoint.jpg" />
         <h3>Another image</h3>
-        <img width="500" src="http://www.canadianpetconnection.com/wp-content/uploads/2011/09/Cats1.jpg" />
+        <img width="500" src="https://upload.wikimedia.org/wikipedia/commons/2/25/Siam_lilacpoint.jpg" />
         <h3>Another image</h3>
-        <img width="500" src="http://www.canadianpetconnection.com/wp-content/uploads/2011/09/Cats1.jpg" />
+        <img width="500" src="https://upload.wikimedia.org/wikipedia/commons/2/25/Siam_lilacpoint.jpg" />
         <h3>Another image</h3>
-        <img width="500" src="http://www.canadianpetconnection.com/wp-content/uploads/2011/09/Cats1.jpg" />
+        <img width="500" src="https://upload.wikimedia.org/wikipedia/commons/2/25/Siam_lilacpoint.jpg" />
         <h3>Another image</h3>
-        <img width="500" src="http://www.canadianpetconnection.com/wp-content/uploads/2011/09/Cats1.jpg" />
+        <img width="500" src="https://upload.wikimedia.org/wikipedia/commons/2/25/Siam_lilacpoint.jpg" />
         <h3>Another image</h3>
-        <img width="500" src="http://www.canadianpetconnection.com/wp-content/uploads/2011/09/Cats1.jpg" />
+        <img width="500" src="https://upload.wikimedia.org/wikipedia/commons/2/25/Siam_lilacpoint.jpg" />
         <h3>Another image</h3>
-        <img width="500" src="http://www.canadianpetconnection.com/wp-content/uploads/2011/09/Cats1.jpg" />
+        <img width="500" src="https://upload.wikimedia.org/wikipedia/commons/2/25/Siam_lilacpoint.jpg" />
         <h3>Another image</h3>
-        <img width="500" src="http://www.canadianpetconnection.com/wp-content/uploads/2011/09/Cats1.jpg" />
+        <img width="500" src="https://upload.wikimedia.org/wikipedia/commons/2/25/Siam_lilacpoint.jpg" />
         <h3>Another image</h3>
-        <img width="500" src="http://www.canadianpetconnection.com/wp-content/uploads/2011/09/Cats1.jpg" />
+        <img width="500" src="https://upload.wikimedia.org/wikipedia/commons/2/25/Siam_lilacpoint.jpg" />
         <h3>Another image</h3>
-        <img width="500" src="http://www.canadianpetconnection.com/wp-content/uploads/2011/09/Cats1.jpg" />
+        <img width="500" src="https://upload.wikimedia.org/wikipedia/commons/2/25/Siam_lilacpoint.jpg" />
         <h3>Another image</h3>
-        <img width="500" src="http://www.canadianpetconnection.com/wp-content/uploads/2011/09/Cats1.jpg" />
+        <img width="500" src="https://upload.wikimedia.org/wikipedia/commons/2/25/Siam_lilacpoint.jpg" />
         <h3>Another image</h3>
-        <img width="500" src="http://www.canadianpetconnection.com/wp-content/uploads/2011/09/Cats1.jpg" />
+        <img width="500" src="https://upload.wikimedia.org/wikipedia/commons/2/25/Siam_lilacpoint.jpg" />
         <h3>Another image</h3>
-        <img width="500" src="http://www.canadianpetconnection.com/wp-content/uploads/2011/09/Cats1.jpg" />
+        <img width="500" src="https://upload.wikimedia.org/wikipedia/commons/2/25/Siam_lilacpoint.jpg" />
         <h3>Another image</h3>
-        <img width="500" src="http://www.canadianpetconnection.com/wp-content/uploads/2011/09/Cats1.jpg" />
+        <img width="500" src="https://upload.wikimedia.org/wikipedia/commons/2/25/Siam_lilacpoint.jpg" />
         <h3>Another image</h3>
-        <img width="500" src="http://www.canadianpetconnection.com/wp-content/uploads/2011/09/Cats1.jpg" />
+        <img width="500" src="https://upload.wikimedia.org/wikipedia/commons/2/25/Siam_lilacpoint.jpg" />
         <h3>Another image</h3>
-        <img width="500" src="http://www.canadianpetconnection.com/wp-content/uploads/2011/09/Cats1.jpg" />
+        <img width="500" src="https://upload.wikimedia.org/wikipedia/commons/2/25/Siam_lilacpoint.jpg" />
         <h3>Another image</h3>
-        <img width="500" src="http://www.canadianpetconnection.com/wp-content/uploads/2011/09/Cats1.jpg" />
+        <img width="500" src="https://upload.wikimedia.org/wikipedia/commons/2/25/Siam_lilacpoint.jpg" />
         <h3>Another image</h3>
-        <img width="500" src="http://www.canadianpetconnection.com/wp-content/uploads/2011/09/Cats1.jpg" />
+        <img width="500" src="https://upload.wikimedia.org/wikipedia/commons/2/25/Siam_lilacpoint.jpg" />
         <h3>Another image</h3>
-        <img width="500" src="http://www.canadianpetconnection.com/wp-content/uploads/2011/09/Cats1.jpg" />
+        <img width="500" src="https://upload.wikimedia.org/wikipedia/commons/2/25/Siam_lilacpoint.jpg" />
     </body>
 </html>
diff --git a/Source/Demos/HtmlRenderer.Demo.Console/PdfSharpCoreConverter.cs b/Source/Demos/HtmlRenderer.Demo.Console/PdfSharpCoreConverter.cs
@@ -24,7 +24,7 @@ public async Task GenerateSampleAsync(HtmlSample sample)
             config.MarginTop = 0;
             config.MarginBottom = 0;
 
-            var pdf = await PdfGenerator.GeneratePdfAsync(sample.Html, config);
+            var pdf = await PdfGenerator.GeneratePdfAsync(sample.Html, config, imageLoad: OnImageLoaded);
             pdf.Save(GetSamplePath(sample));
         }
     }

diff --git a/Source/Demos/HtmlRenderer.Demo.Console/Program.cs b/Source/Demos/HtmlRenderer.Demo.Console/Program.cs
@@ -22,6 +22,9 @@
 
 foreach (var htmlSample in samples)
 {
+    ////Just doing one test here.  Comment this for all of them.
+    //if (!htmlSample.FullName.Contains("05")) continue;
+
     await skia.GenerateSampleAsync(htmlSample);
     await pdfSharp.GenerateSampleAsync(htmlSample);
 }

diff --git a/Source/Demos/HtmlRenderer.Demo.Console/SampleConverterBase.cs b/Source/Demos/HtmlRenderer.Demo.Console/SampleConverterBase.cs
@@ -1,5 +1,7 @@
 using System;
+using System.Collections.Concurrent;
 using System.Collections.Generic;
+using System.Drawing.Imaging;
 using System.Linq;
 using System.Runtime.CompilerServices;
 using System.Text;
@@ -21,6 +23,9 @@ public SampleConverterBase(string sampleRunIdentifier, string basePath)
             _sampleRunIdentifier = sampleRunIdentifier;
             _basePath = basePath;
             _thisTypeName = this.GetType().Name;
+
+            this.OnImageLoaded += ImageLoad;
+            this.OnStyleLoaded += StylesheetLoad;
         }
 
         public CssData CssData => null;
@@ -32,9 +37,18 @@ protected string GetSamplePath(HtmlSample sample)
             return Path.Combine(path, sample.FullName + _thisTypeName + "_" + ".pdf");
         }
 
-        internal void ImageLoad(object? sender, HtmlStylesheetLoadEventArgs e)
+        protected EventHandler<HtmlImageLoadEventArgs> OnImageLoaded;
+        protected EventHandler<HtmlStylesheetLoadEventArgs> OnStyleLoaded;
+
+        internal void ImageLoad(object? sender, HtmlImageLoadEventArgs e)
         {
-            throw new NotImplementedException();
+            //The samples use some well known image resources, so do that here.
+            var imageStream = DemoUtils.GetImageStream(e.Src);
+            if (imageStream != null)
+            {
+                e.Handled = true;
+                e.Callback(imageStream);
+            }
         }
 
         internal void StylesheetLoad(object? sender, HtmlStylesheetLoadEventArgs e)

diff --git a/Source/Demos/HtmlRenderer.Demo.Console/SkiaConverter.cs b/Source/Demos/HtmlRenderer.Demo.Console/SkiaConverter.cs
@@ -27,7 +27,7 @@ public async Task GenerateSampleAsync(HtmlSample sample)
 
             using (var fileStream = File.Open(GetSamplePath(sample), FileMode.CreateNew))
             {
-                await PdfGenerator.GeneratePdfAsync(sample.Html, fileStream, config);
+                await PdfGenerator.GeneratePdfAsync(sample.Html, fileStream, config, imageLoad: OnImageLoaded);
                 fileStream.Flush();
             }
         }

diff --git a/Source/HtmlRenderer/Adapters/RAdapter.cs b/Source/HtmlRenderer/Adapters/RAdapter.cs
@@ -150,7 +150,14 @@ public RBrush GetLinearGradientBrush(RRect rect, RColor color1, RColor color2, d
         public RImage ConvertImage(object image)
         {
             // TODO:a remove this by creating better API.
-            return ConvertImageInt(image);
+            if (image is Stream imageStream)
+            {
+                return ImageFromStream(imageStream);
+            }
+            else
+            {
+                return ConvertImageInt(image);
+            }
         }
 
         /// <summary>