Imageprocessor: CenterCoordinates not working in ResizeLayer

Created on 29 Jan 2020  路  10Comments  路  Source: JimBobSquarePants/ImageProcessor

Description

I am trying to allow users to set the anchorposition for thumbnails that are created, so that the thumbnails dont crop peoples heads off, when the source file is a portrait. The system has been working fine since i built it, but the non-decapitation is a new requirement. If i change the anchorposition (when using ResizeMode.Crop), the resultant thumbnail is always centred. It is as if the AnchorPosition is ignored and the default (Center) is used.

I have removed the logging from this sample. This was to ensure that indeed a new AnchorPosition was being set before this point in the code.

Steps to Reproduce

``` using (Stream s = new System.IO.MemoryStream()) {
using (ImageFactory imageFactory = new ImageFactory()) {
imageFactory.Load(diskpath);
ResizeLayer layer = new ResizeLayer(new System.Drawing.Size(thumbwidth, thumbheight));

    layer.AnchorPosition = anchor;
    layer.ResizeMode = ResizeMode.Crop;
    imageFactory.AutoRotate();

    imageFactory.Resize(layer);
    imageFactory.Save(s);

```

System Configuration

Windows 10 Pro, IIS (the one that comes with windows 10 Enterprise, not F5)

  • ImageProcessor version: 2.8.0
  • ImageProcessor.Web version: 4.11.0
  • ImageProcessor.Web.Config version: 2.6.0
  • Other ImageProcessor packages and versions:
  • Environment (Operating system, version and so on): Windows 10 Enterprise
  • .NET Framework version: 4.7.2
  • Additional information:
invalid not enough information provided question

Most helpful comment

Ouch!

All 10 comments

As long as you're not also setting the CenterCoordinates, this should do exactly what you want, as you can see in the source:

https://github.com/JimBobSquarePants/ImageProcessor/blob/4af8de4a6376d9426fadd5c4596bc1de187899c0/src/ImageProcessor/Imaging/Resizer.cs#L364-L450

In your case however, I would recommend allowing users to put a focus point on the image or manually zoom/crop the image...

My Bad - I was not correctly parsing the string value to set the position.

Hi @ronaldbarendse, thanks for you advice. Now the AnchorPosition is working as intended. On your recommendation I am now implementing a coordinates version, yet the resizer is now ignoring the CenterCoordinates, and the thumbnail is always centered at the bottom - i.e. the top is cropped off regardless. Am i missing something?

using (Stream s = new System.IO.MemoryStream()) {
using (ImageFactory imageFactory = new ImageFactory()) {
    imageFactory.Load(diskpath);
    ResizeLayer layer = new ResizeLayer(new System.Drawing.Size(thumbwidth, thumbheight));

    if (resizepoint.X > 0 && resizepoint.Y > 0) {
        layer.CenterCoordinates = new float[] { resizepoint.X , resizepoint.Y } ;
    } else {
        layer.AnchorPosition = anchor;
    }

    layer.ResizeMode = ResizeMode.Crop;
    //ResizeLayer layer = new ResizeLayer(new System.Drawing.Size(thumbwidth, thumbheight), ResizeMode.Crop, anchor);

    //imageFactory.AutoRotate();

    imageFactory.Resize(layer);
    imageFactory.Save(s);

I take it that the center coordinates are X first, Y second, although I have tried both to no avail?

Are CenterCoordinates supposed to be a positive integer or a fraction?
e.g.
CenterCoordinates[0] = half the width of the image
versus:
CenterCoordinates[0] = 0.5F ??

As it's a float number, you would expect it to be a fraction :wink: Have you at least tried it first, before reopening this issue?

Hi @ronaldbarendse after getting the AnchorPosition to work I spent 2.5 hours on this trying to get the CentreCoordinates to work. I am not the brightest developer but I have been doing it since 1999 and I know that persistence is king. Initially i was using the pixel dimensions - e.g. for x: 1200 wide image * 0.5 = 600, then later i switched to fractions:

if (altpos != AltAnchorPosition.None) {
    switch (altpos) {
        case AltAnchorPosition.QuarterUp:
            layer.CenterCoordinates = new[] { 0.5F, 0.25F };
            break;
        case AltAnchorPosition.ThirdUp:
            layer.CenterCoordinates = new[] { 0.5F, 0.333F };
            break;
        case AltAnchorPosition.ThreeQuartersUp:
            layer.CenterCoordinates = new[] { 0.5F, 0.75F };
            break;
        case AltAnchorPosition.TwoThirdsUp:
            layer.CenterCoordinates = new[] { 0.5F, 0.667F };
            break;
    }
} else {
    layer.AnchorPosition = anchor;
}

But the CentreCoordinates appear to be ignored, as the resulting image is always cropped to the bottom, so for this source image:
image

I would get this crop for any of the AltAnchorPosition alternatives:

image

For this image one would expect the three quarter up coordinates to basically give the same crop as using AnchorPosition.Top - e.g. this thumbnail - created using AnchorPosition.Top:

image

Do you have any example code where the CentreCoordinates work as intended?

If you start the TestWebsite from the source code, you can see it's working as expected:

  • /images/format-Penguins.jpg?mode=crop&width=100&height=100&center=0.5,0.5 - uses the center
  • /images/format-Penguins.jpg?mode=crop&width=100&height=100&center=0,0 - uses the top/left side

@ronaldbarendse

Why didn't you just state that the CentreCoordinates are not inputted X,Y, but Y,X?
This is contrary to convention and was the root of the problem.
My second code sample clearly showed that i was putting the vertical parameter second, as would be usual if i was creating a Size, or Point or other coordinate based object.

@binraider It's in the documentation.

You may specify a center as a fraction from the top-left corner of the image in y,x format. Fractions are specified as a decimal between 0 and 1. This point will be as close to the center of your crop as possible while keeping the crop within the image

https://imageprocessor.org/imageprocessor-web/imageprocessingmodule/resize/

Ouch!

Was this page helpful?
0 / 5 - 0 ratings

Related issues

srdjo picture srdjo  路  6Comments

Leftyx picture Leftyx  路  5Comments

alecrt picture alecrt  路  7Comments

nul800sebastiaan picture nul800sebastiaan  路  7Comments

AtomicSpider picture AtomicSpider  路  3Comments