FYI I moved our base build projects uver to ImageProcessor after years of using ImageResizer. https://world.episerver.com/blogs/vincent-baaij/dates/2019/1/episerver-and-imageprocessor-new-crop-addition/
This has multiple benefits
On the whole the expereince of using it for us has been far better since transitioning.
There are some code related to focal point in ImageProcessor package - https://github.com/vnbaaij/ImageProcessor.Web.Episerver/pull/18
haven't gone through PR. So - no comments
When installing ImageResizer focal point plugin following things should happen / actions need to be taken in order to make package working:
1) New files in "/ClientResources/focalpoint/" (editor.js, widgettemplate.css, widgettemplate.html)
2) add section in root modules.config file
<dojo>
<paths>
<add name="focal-point" path="focalpoint" />
</paths>
</dojo>
3) implement new interface on your media content definition `IFocalPointData`
4) add new property to media content type definition
[BackingType(typeof(PropertyFocalPoint))]
public virtual FocalPoint FocalPoint { get; set; }
After I 'borrowed' some code from ImageResizer and the FocalPoint plugin, I got it to work.
If any one have a nicer solution would be great.
1) In HtmlHelper extension class:
public static UrlBuilder FocalPointImage(this HtmlHelper helper, ContentReference image)
{
if (image == null) throw new ArgumentNullException(nameof(image));
var contentLoader = ServiceLocator.Current.GetInstance<IContentLoader>();
ImageFile imageData;
try
{
imageData = contentLoader.Get<ImageFile>(image);
}
catch (TypeMismatchException)
{
throw new ArgumentNullException(nameof(image));
}
if (imageData == null) throw new ArgumentNullException(nameof(image));
var urlResolver = ServiceLocator.Current.GetInstance<IUrlResolver>();
return new UrlBuilder(urlResolver.GetUrl(image)).Add("crop", CropDimensions.Parse(imageData, null).ToString());
}
2) In CropDimensions class:
public class CropDimensions
{
public int X1 { get; set; }
public int Y1 { get; set; }
public int X2 { get; set; }
public int Y2 { get; set; }
public override string ToString()
{
return $"{X1},{Y1},{X2},{Y2}";
}
public static CropDimensions Parse(IFocalPointData focalPointData, ResizeSettings resizeSettings)
{
var sourceWidth = focalPointData.OriginalWidth ?? 1;
var sourceHeight = focalPointData.OriginalHeight ?? 1;
var focalPointY = (int) Math.Round(sourceHeight * (focalPointData.FocalPoint.Y / 100));
var focalPointX = (int) Math.Round(sourceWidth * (focalPointData.FocalPoint.X / 100));
var sourceAspectRatio = (double) sourceWidth / sourceHeight;
double targetAspectRatio = 1.0f;
if (resizeSettings != null)
{
//Calculate target aspect ratio from resizeSettings.
if (resizeSettings.Width > 0 && resizeSettings.Height > 0)
{
targetAspectRatio = (double) resizeSettings.Width / resizeSettings.Height;
}
else
{
targetAspectRatio = sourceAspectRatio;
}
}
var x1 = 0;
var y1 = 0;
int x2;
int y2;
if (targetAspectRatio.Equals(sourceAspectRatio))
{
x2 = focalPointData.OriginalWidth ?? 0;
y2 = focalPointData.OriginalHeight ?? 0;
}
else if (targetAspectRatio > sourceAspectRatio)
{
// the requested aspect ratio is wider than the source image
var newHeight = (int) Math.Floor(sourceWidth / targetAspectRatio);
x2 = sourceWidth;
y1 = Math.Max(focalPointY - (int) Math.Round((double) newHeight / 2), 0);
y2 = Math.Min(y1 + newHeight, sourceHeight);
if (y2 == sourceHeight)
{
y1 = y2 - newHeight;
}
}
else
{
// the requested aspect ratio is narrower than the source image
var newWidth = (int) Math.Round(sourceHeight * targetAspectRatio);
x1 = Math.Max(focalPointX - (int) Math.Round((double) newWidth / 2), 0);
x2 = Math.Min(x1 + newWidth, sourceWidth);
y2 = sourceHeight;
if (x2 == sourceWidth)
{
x1 = x2 - newWidth;
}
}
return new CropDimensions {X1 = x1, X2 = x2, Y1 = y1, Y2 = y2};
}
}
https://world.episerver.com/blogs/stephan-lonntorp/dates/2016/9/focal-point-based-image-cropping-for-episerver-using-imageresizing-net/
Does anyone have information how to use this plugin. Simply installing it and creating a ImageFile media type does not seem to do anything.
When implementing I've tried:
If you read this: https://github.com/defsteph/EPiFocalPoint
It's just supposed to work...