V9: Fix ImageSharp integration and add support for custom crops

src/Umbraco.Core/Media/IImageUrlGenerator.cs

@@ -1,12 +1,28 @@
-using System.Collections.Generic;
+using System.Collections.Generic;
 using Umbraco.Cms.Core.Models;
 
 namespace Umbraco.Cms.Core.Media
 {
+    /// <summary>
+    /// Exposes a method that generates an image URL based on the specified options.
+    /// </summary>
     public interface IImageUrlGenerator
     {
+        /// <summary>
+        /// Gets the supported image file types/extensions.
+        /// </summary>
+        /// <value>
+        /// The supported image file types/extensions.
+        /// </value>
         IEnumerable<string> SupportedImageFileTypes { get; }
 
+        /// <summary>
+        /// Gets the image URL based on the specified <paramref name="options" />.
+        /// </summary>
+        /// <param name="options">The image URL generation options.</param>
+        /// <returns>
+        /// The generated image URL.
+        /// </returns>
         string GetImageUrl(ImageUrlGenerationOptions options);
     }
 }

src/Umbraco.Core/Models/ImageUrlGenerationOptions.cs

@@ -1,66 +1,68 @@
-namespace Umbraco.Cms.Core.Models
+namespace Umbraco.Cms.Core.Models
 {
     /// <summary>
-    /// These are options that are passed to the IImageUrlGenerator implementation to determine
-    /// the propery URL that is needed
+    /// These are options that are passed to the IImageUrlGenerator implementation to determine the URL that is generated.
     /// </summary>
     public class ImageUrlGenerationOptions
     {
-        public ImageUrlGenerationOptions (string imageUrl)
-        {
-            ImageUrl = imageUrl;
-        }
+        public ImageUrlGenerationOptions(string imageUrl) => ImageUrl = imageUrl;
 
         public string ImageUrl { get; }
+
         public int? Width { get; set; }
+
         public int? Height { get; set; }
-        public decimal? WidthRatio { get; set; }
-        public decimal? HeightRatio { get; set; }
+
         public int? Quality { get; set; }
+
         public ImageCropMode? ImageCropMode { get; set; }
+
         public ImageCropAnchor? ImageCropAnchor { get; set; }
-        public bool DefaultCrop { get; set; }
+
         public FocalPointPosition FocalPoint { get; set; }
+
         public CropCoordinates Crop { get; set; }
+
         public string CacheBusterValue { get; set; }
+
         public string FurtherOptions { get; set; }
-        public bool UpScale { get; set; } = true;
-        public string AnimationProcessMode { get; set; }
 
         /// <summary>
-        /// The focal point position, in whatever units the registered IImageUrlGenerator uses,
-        /// typically a percentage of the total image from 0.0 to 1.0.
+        /// The focal point position, in whatever units the registered IImageUrlGenerator uses, typically a percentage of the total image from 0.0 to 1.0.
         /// </summary>
         public class FocalPointPosition
         {
-            public FocalPointPosition (decimal top, decimal left)
+            public FocalPointPosition(decimal left, decimal top)
             {
                 Left = left;
                 Top = top;
             }
 
             public decimal Left { get; }
+
             public decimal Top { get; }
         }
 
         /// <summary>
-        /// The bounds of the crop within the original image, in whatever units the registered
-        /// IImageUrlGenerator uses, typically a percentage between 0 and 100.
+        /// The bounds of the crop within the original image, in whatever units the registered IImageUrlGenerator uses, typically a percentage between 0.0 and 1.0.
         /// </summary>
         public class CropCoordinates
         {
-            public CropCoordinates (decimal x1, decimal y1, decimal x2, decimal y2)
+            public CropCoordinates(decimal left, decimal top, decimal right, decimal bottom)
             {
-                X1 = x1;
-                Y1 = y1;
-                X2 = x2;
-                Y2 = y2;
+                Left = left;
+                Top = top;
+                Right = right;
+                Bottom = bottom;
             }
 
-            public decimal X1 { get; }
-            public decimal Y1 { get; }
-            public decimal X2 { get; }
-            public decimal Y2 { get; }
+            public decimal Left { get; }
+
+            public decimal Top { get; }
+
+            public decimal Right { get; }
+
+            public decimal Bottom { get; }
         }
     }
 }

src/Umbraco.Infrastructure/DependencyInjection/UmbracoBuilder.CoreServices.cs

@@ -144,8 +144,6 @@ public static IUmbracoBuilder AddCoreInitialServices(this IUmbracoBuilder builde
             builder.PropertyValueConverters()
                 .Remove<SimpleTinyMceValueConverter>();
 
-            builder.Services.AddUnique<IImageUrlGenerator, ImageSharpImageUrlGenerator>();
-
             // register *all* checks, except those marked [HideFromTypeFinder] of course
             builder.Services.AddUnique<IMarkdownToHtmlConverter, MarkdownToHtmlConverter>();
 
@@ -180,7 +178,10 @@ public static IUmbracoBuilder AddCoreInitialServices(this IUmbracoBuilder builde
 
             builder.Services.AddUnique<ICronTabParser, NCronTabParser>();
 
+            // Add default ImageSharp configuration and service implementations
+            builder.Services.AddUnique(SixLabors.ImageSharp.Configuration.Default);
             builder.Services.AddUnique<IImageDimensionExtractor, ImageDimensionExtractor>();
+            builder.Services.AddUnique<IImageUrlGenerator, ImageSharpImageUrlGenerator>();
 
             builder.Services.AddUnique<PackageDataInstallation>();
 

src/Umbraco.Infrastructure/Media/ImageDimensionExtractor.cs

@@ -8,6 +8,17 @@ namespace Umbraco.Cms.Infrastructure.Media
 {
     internal class ImageDimensionExtractor : IImageDimensionExtractor
     {
+        /// <summary>
+        /// The ImageSharp configuration.
+        /// </summary>
+        private readonly Configuration _configuration;
+
+        /// <summary>
+        /// Initializes a new instance of the <see cref="ImageDimensionExtractor" /> class.
+        /// </summary>
+        /// <param name="configuration">The ImageSharp configuration.</param>
+        public ImageDimensionExtractor(Configuration configuration) => _configuration = configuration;
+
         /// <summary>
         /// Gets the dimensions of an image.
         /// </summary>
@@ -39,7 +50,7 @@ public ImageSize GetDimensions(Stream stream)
                     stream.Seek(0, SeekOrigin.Begin);
                 }
 
-                using (var image = Image.Load(stream))
+                using (var image = Image.Load(_configuration, stream))
                 {
                     var fileWidth = image.Width;
                     var fileHeight = image.Height;

src/Umbraco.Infrastructure/Media/ImageSharpImageUrlGenerator.cs

@@ -1,68 +1,107 @@
-using System.Collections.Generic;
+using System;
+using System.Collections.Generic;
 using System.Globalization;
+using System.Linq;
 using System.Text;
+using SixLabors.ImageSharp;
 using Umbraco.Cms.Core.Media;
 using Umbraco.Cms.Core.Models;
-using Umbraco.Extensions;
 
 namespace Umbraco.Cms.Infrastructure.Media
 {
+    /// <summary>
+    /// Exposes a method that generates an image URL based on the specified options that can be processed by ImageSharp.
+    /// </summary>
+    /// <seealso cref="Umbraco.Cms.Core.Media.IImageUrlGenerator" />
     public class ImageSharpImageUrlGenerator : IImageUrlGenerator
     {
-        public IEnumerable<string> SupportedImageFileTypes => new[] { "jpeg", "jpg", "gif", "bmp", "png" };
+        /// <inheritdoc />
+        public IEnumerable<string> SupportedImageFileTypes { get; }
 
+        /// <summary>
+        /// Initializes a new instance of the <see cref="ImageSharpImageUrlGenerator" /> class.
+        /// </summary>
+        /// <param name="configuration">The ImageSharp configuration.</param>
+        public ImageSharpImageUrlGenerator(Configuration configuration)
+            : this(configuration.ImageFormats.SelectMany(f => f.FileExtensions).ToArray())
+        { }
+
+        /// <summary>
+        /// Initializes a new instance of the <see cref="ImageSharpImageUrlGenerator" /> class.
+        /// </summary>
+        /// <param name="supportedImageFileTypes">The supported image file types/extensions.</param>
+        /// <remarks>
+        /// This constructor is only used for testing.
+        /// </remarks>
+        internal ImageSharpImageUrlGenerator(IEnumerable<string> supportedImageFileTypes) => SupportedImageFileTypes = supportedImageFileTypes;
+
+        /// <inheritdoc/>
         public string GetImageUrl(ImageUrlGenerationOptions options)
         {
-            if (options == null) return null;
+            if (options == null)
+            {
+                return null;
+            }
 
-            var imageProcessorUrl = new StringBuilder(options.ImageUrl ?? string.Empty);
+            var imageUrl = new StringBuilder(options.ImageUrl);
 
-            if (options.FocalPoint != null) AppendFocalPoint(imageProcessorUrl, options);
-            else if (options.Crop != null) AppendCrop(imageProcessorUrl, options);
-            else if (options.DefaultCrop) imageProcessorUrl.Append("?anchor=center&mode=crop");
-            else
+            bool queryStringHasStarted = false;
+            void AppendQueryString(string value)
             {
-                imageProcessorUrl.Append("?mode=").Append((options.ImageCropMode ?? ImageCropMode.Crop).ToString().ToLower());
+                imageUrl.Append(queryStringHasStarted ? '&' : '?');
+                queryStringHasStarted = true;
 
-                if (options.ImageCropAnchor != null) imageProcessorUrl.Append("&anchor=").Append(options.ImageCropAnchor.ToString().ToLower());
+                imageUrl.Append(value);
             }
+            void AddQueryString(string key, params IConvertible[] values)
+                => AppendQueryString(key + '=' + string.Join(",", values.Select(x => x.ToString(CultureInfo.InvariantCulture))));
 
-            var hasFormat = options.FurtherOptions != null && options.FurtherOptions.InvariantContains("&format=");
+            if (options.FocalPoint != null)
+            {
+                AddQueryString("rxy", options.FocalPoint.Left, options.FocalPoint.Top);
+            }
 
-            //Only put quality here, if we don't have a format specified.
-            //Otherwise we need to put quality at the end to avoid it being overridden by the format.
-            if (options.Quality.HasValue && hasFormat == false) imageProcessorUrl.Append("&quality=").Append(options.Quality);
-            if (options.HeightRatio.HasValue) imageProcessorUrl.Append("&heightratio=").Append(options.HeightRatio.Value.ToString(CultureInfo.InvariantCulture));
-            if (options.WidthRatio.HasValue) imageProcessorUrl.Append("&widthratio=").Append(options.WidthRatio.Value.ToString(CultureInfo.InvariantCulture));
-            if (options.Width.HasValue) imageProcessorUrl.Append("&width=").Append(options.Width);
-            if (options.Height.HasValue) imageProcessorUrl.Append("&height=").Append(options.Height);
-            if (options.UpScale == false) imageProcessorUrl.Append("&upscale=false");
-            if (!string.IsNullOrWhiteSpace(options.AnimationProcessMode)) imageProcessorUrl.Append("&animationprocessmode=").Append(options.AnimationProcessMode);
-            if (!string.IsNullOrWhiteSpace(options.FurtherOptions)) imageProcessorUrl.Append(options.FurtherOptions);
+            if (options.Crop != null)
+            {
+                AddQueryString("cc", options.Crop.Left, options.Crop.Top, options.Crop.Right, options.Crop.Bottom);
+            }
 
-            //If furtherOptions contains a format, we need to put the quality after the format.
-            if (options.Quality.HasValue && hasFormat) imageProcessorUrl.Append("&quality=").Append(options.Quality);
-            if (!string.IsNullOrWhiteSpace(options.CacheBusterValue)) imageProcessorUrl.Append("&rnd=").Append(options.CacheBusterValue);
+            if (options.ImageCropMode.HasValue)
+            {
+                AddQueryString("rmode", options.ImageCropMode.Value.ToString().ToLowerInvariant());
+            }
 
-            return imageProcessorUrl.ToString();
-        }
+            if (options.ImageCropAnchor.HasValue)
+            {
+                AddQueryString("ranchor", options.ImageCropAnchor.Value.ToString().ToLowerInvariant());
+            }
 
-        private void AppendFocalPoint(StringBuilder imageProcessorUrl, ImageUrlGenerationOptions options)
-        {
-            imageProcessorUrl.Append("?center=");
-            imageProcessorUrl.Append(options.FocalPoint.Top.ToString(CultureInfo.InvariantCulture)).Append(",");
-            imageProcessorUrl.Append(options.FocalPoint.Left.ToString(CultureInfo.InvariantCulture));
-            imageProcessorUrl.Append("&mode=crop");
-        }
+            if (options.Width.HasValue)
+            {
+                AddQueryString("width", options.Width.Value);
+            }
 
-        private void AppendCrop(StringBuilder imageProcessorUrl, ImageUrlGenerationOptions options)
-        {
-            imageProcessorUrl.Append("?crop=");
-            imageProcessorUrl.Append(options.Crop.X1.ToString(CultureInfo.InvariantCulture)).Append(",");
-            imageProcessorUrl.Append(options.Crop.Y1.ToString(CultureInfo.InvariantCulture)).Append(",");
-            imageProcessorUrl.Append(options.Crop.X2.ToString(CultureInfo.InvariantCulture)).Append(",");
-            imageProcessorUrl.Append(options.Crop.Y2.ToString(CultureInfo.InvariantCulture));
-            imageProcessorUrl.Append("&cropmode=percentage");
+            if (options.Height.HasValue)
+            {
+                AddQueryString("height", options.Height.Value);
+            }
+
+            if (options.Quality.HasValue)
+            {
+                AddQueryString("quality", options.Quality.Value);
+            }
+
+            if (string.IsNullOrWhiteSpace(options.FurtherOptions) == false)
+            {
+                AppendQueryString(options.FurtherOptions.TrimStart('?', '&'));
+            }
+
+            if (string.IsNullOrWhiteSpace(options.CacheBusterValue) == false)
+            {
+                AddQueryString("rnd", options.CacheBusterValue);
+            }
+
+            return imageUrl.ToString();
         }
     }
 }

src/Umbraco.Infrastructure/PropertyEditors/ValueConverters/ImageCropperValue.cs

@@ -1,4 +1,4 @@
-// Copyright (c) Umbraco.
+// Copyright (c) Umbraco.
 // See LICENSE for more details.
 
 using System;
@@ -63,21 +63,19 @@ public ImageCropperCrop GetCrop(string alias)
                 : Crops.FirstOrDefault(x => x.Alias.InvariantEquals(alias));
         }
 
-        public ImageUrlGenerationOptions GetCropBaseOptions(string url, ImageCropperCrop crop, bool defaultCrop, bool preferFocalPoint)
+        public ImageUrlGenerationOptions GetCropBaseOptions(string url, ImageCropperCrop crop, bool preferFocalPoint)
         {
-            if (preferFocalPoint && HasFocalPoint()
-                || crop != null && crop.Coordinates == null && HasFocalPoint()
-                || defaultCrop && HasFocalPoint())
+            if ((preferFocalPoint && HasFocalPoint()) || (crop != null && crop.Coordinates == null && HasFocalPoint()))
             {
-                return new ImageUrlGenerationOptions(url) { FocalPoint = new ImageUrlGenerationOptions.FocalPointPosition(FocalPoint.Top, FocalPoint.Left) };
+                return new ImageUrlGenerationOptions(url) { FocalPoint = new ImageUrlGenerationOptions.FocalPointPosition(FocalPoint.Left, FocalPoint.Top) };
             }
             else if (crop != null && crop.Coordinates != null && preferFocalPoint == false)
             {
                 return new ImageUrlGenerationOptions(url) { Crop = new ImageUrlGenerationOptions.CropCoordinates(crop.Coordinates.X1, crop.Coordinates.Y1, crop.Coordinates.X2, crop.Coordinates.Y2) };
             }
             else
             {
-                return new ImageUrlGenerationOptions(url) { DefaultCrop = true };
+                return new ImageUrlGenerationOptions(url);
             }
         }
 
@@ -92,7 +90,7 @@ public string GetCropUrl(string alias, IImageUrlGenerator imageUrlGenerator, boo
             if (crop == null && !string.IsNullOrWhiteSpace(alias))
                 return null;
 
-            var options = GetCropBaseOptions(string.Empty, crop, string.IsNullOrWhiteSpace(alias), useFocalPoint);
+            var options = GetCropBaseOptions(null, crop, useFocalPoint || string.IsNullOrWhiteSpace(alias));
 
             if (crop != null && useCropDimensions)
             {
@@ -108,9 +106,9 @@ public string GetCropUrl(string alias, IImageUrlGenerator imageUrlGenerator, boo
         /// <summary>
         /// Gets the value image URL for a specific width and height.
         /// </summary>
-        public string GetCropUrl(int width, int height, IImageUrlGenerator imageUrlGenerator, bool useFocalPoint = false, string cacheBusterValue = null)
+        public string GetCropUrl(int width, int height, IImageUrlGenerator imageUrlGenerator, string cacheBusterValue = null)
         {
-            var options = GetCropBaseOptions(string.Empty, null, true, useFocalPoint);
+            var options = GetCropBaseOptions(null, null, false);
 
             options.Width = width;
             options.Height = height;