Merge pull request #397 from SixLabors/js/default-auto-orient

Auto-orient images and preserve encoder options

Author: JimBobSquarePants

samples/ImageSharp.Web.Sample/Pages/Index.cshtml

@@ -125,20 +125,23 @@
     <hr />
     <section>
         <h2>ICC Profiles</h2>
+        <p>
+        Demonstrates that ICC Profiles are converted to sRGB by default ensuring correct display of images with embedded profiles.
+        </p>
     <div>
         <p>
-            <code>issue_2723.jpg?width=2000</code>
+            <code>issue_2723.jpg?width=1000</code>
         </p>
         <p>
-            <img src="issue_2723.jpg" imagesharp-width="2000" />
+            <img src="issue_2723.jpg" imagesharp-width="1000" />
         </p>
     </div>
     <div>
         <p>
-            <code>issue_2723.jpg?width=2000&format=webp</code>
+            <code>issue_2723.jpg?width=1000&format=webp</code>
         </p>
         <p>
-            <img src="issue_2723.jpg" imagesharp-width="2000" imagesharp-format="Format.WebP" />
+            <img src="issue_2723.jpg" imagesharp-width="1000" imagesharp-format="Format.WebP" />
         </p>
     </div>
     </section>
@@ -308,7 +311,20 @@
             </p>
         </div>
     </section>
-
+    <hr />
+    <section>
+        <h2>EXIF AutoOrientation</h2>
+        <p>Demonstrates that by default EXIF orientation is normalized enabling correct display of WEBP images.</p>
+    <div>
+        <p>
+            <code>Exif5-1x.webp?width=128</code>
+        </p>
+        <p>
+            <img src="Exif5-1x.webp" imagesharp-width="128"/>
+        </p>
+    </div>
+    </section>
+    <hr />
     <section>
         <h2>EXIF Handling Portrait</h2>
         <p>Demonstrates that the middleware handles EXIF orientation correctly for portrait images.</p>

samples/ImageSharp.Web.Sample/wwwroot/Exif5-1x.webp

@@ -9,6 +9,7 @@
 using SixLabors.ImageSharp.Formats.Png;
 using SixLabors.ImageSharp.Formats.Webp;
 using SixLabors.ImageSharp.Web.Commands;
+using SixLabors.ImageSharp.Web.Processors;
 using SixLabors.ImageSharp.Web.Providers;
 
 namespace SixLabors.ImageSharp.Web.Middleware;
@@ -31,7 +32,20 @@ public class ImageSharpMiddlewareOptions
         return HMACUtilities.ComputeHMACSHA256(uri, secret);
     };
 
-    private Func<ImageCommandContext, Task> onParseCommandsAsync = _ => Task.CompletedTask;
+    private Func<ImageCommandContext, Task> onParseCommandsAsync = context =>
+    {
+        // WEBP EXIF orientation is ignored by browsers.
+        // https://zpl.fi/exif-orientation-in-different-formats/
+        // To ensure that orientation is handled correctly for web use we transparently add the auto-orient command if it is not already present.
+        // See issues #304, #375, and #381 for more details.
+        if (!context.Commands.Contains(AutoOrientWebProcessor.AutoOrient))
+        {
+            context.Commands.Insert(0, new KeyValuePair<string, string?>(AutoOrientWebProcessor.AutoOrient, bool.TrueString));
+        }
+
+        return Task.CompletedTask;
+    };
+
     private Func<ImageCommandContext, Configuration, Task<DecoderOptions?>> onBeforeLoadAsync = (_, _) => Task.FromResult<DecoderOptions?>(null);
     private Func<FormattedImage, Task> onBeforeSaveAsync = _ => Task.CompletedTask;
     private Func<ImageProcessingContext, Task> onProcessedAsync = _ => Task.CompletedTask;

src/ImageSharp.Web/Middleware/ImageSharpMiddlewareOptions.cs

@@ -56,7 +56,10 @@ public FormattedImage Process(
                         Quality = quality,
                         Interleaved = reference.Interleaved,
                         ColorType = reference.ColorType,
-                        SkipMetadata = reference.SkipMetadata
+                        Progressive = reference.Progressive,
+                        ProgressiveScans = reference.ProgressiveScans,
+                        SkipMetadata = reference.SkipMetadata,
+                        RestartInterval = reference.RestartInterval
                     };
                 }
             }