Home/ Questions/Q 7041179
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-28T02:00:28+00:00

I am using the www.imageresizing.net tool for .NET to create a gallery and thumbnail

  • 0

I am using the http://www.imageresizing.net tool for .NET to create a gallery and thumbnail image on the fly. What’s really neat about this component is you can re-crop and resize images simply by altering a URL.

Now, what I have is a gallery image in my required aspect ratio (9:5) rendering correctly with the below:

upload/289.jpg?crop=22,30,562,330&width=540&height=300

You will notice the defined crop coordinates above 22,30,562,330 (X1,Y1,X2,Y2) this selects an area 22 pixels in, 30 pixels down, 562 pixels across, 330 pixels in from the bottom. So basically a 540x300px rough crop area in the centre of a larger image (640×427 but this is irrelevant to the question).

Now as said, this displays well and in the correct aspect ratio. I can then alter the URL to a thumbnail version using:

upload/289.jpg?crop=22,30,562,330&width=120&height=67

I previously worked out that 120×67 (120.6×67 pixels to be exact) is the correct width and height to maintain my aspect ratio, and my crop coords can obviously stay the same as I am just scaling the image. Now again when I view this, things look great.

test1

(I have placed it on a grey background so you can see the image boundaries)

However my issue is when I want to knock 10 pixels off either side and setting a width of 100 things go pear shaped. I want to do this because on an image gallery I am using I need to be able to fit in four images across.

Now if I specify this, my image will display, but in a white letterbox with two small bars top and bottom, which I do appreciate because I have not added 10 pixels to my crop on the left or yet subtracted 10 pixels from my crop on the right:

upload/289.jpg?crop=22,30,562,330&width=100&height=67

test2

So obviously I need to adjust my crop X1 (22) and crop X2 (562) a bit. However, it doesn’t seem to be as easy as that, as this still retains the letterbox if I set to 32 and 552 respectively which I would think I need to compensate for the width dropping from 120 to 100.

I think the required 10 pixels from both sides need to be applied prior to the scaling or something (?), but I have no idea on how to tackle this algorithm and I’m really lost here!!

Make sense? Could any image manipulation/math wizards help me here?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Just add &mode=crop to let the module do the math for you (and make sure you’re using V3.1+).

    I believe that your confusion stems from the fact that the crop coordinates (by default) are relative to the original image, and the width/height values are the scaled size of the image. I.e, 10 pixels off the width setting equates to 50 pixels or so on the cropping rectangle with that particular image. With cropxscale and cropyscale you can change how those crop values are interpreted. &cropxscale=100&cropyscale=100 makes them percentages, while &cropxscale=120&cropyscale=67 would let you specify crop coordinates relative to the size of the scaled image.

    In addition, V3.1 and higher lets you both manually crop and auto-crop, as well:

    Ex. ?crop=22,30,562,330&width=100&height=67&mode=crop.

    The module will first apply your crop settings, then proceed to crop again to make sure you get an exact match for your with and height specifications. If you don’t need an exact width and height, you can use &mode=max instead.

    Also, you can adjust how automatic cropping is applied with the anchor setting.

    I’m not completely sure where your cropping coordinates are coming from or what the rest of the situation is, but as always, I can be reached at support@imageresizing.net.

    You can also check out the command reference at imageresizing.net/docs/reference.

    I think I may add a page of examples on using the crop commands together, as the theory can be math-intensive. My apologies for taking so long to find this post; I wish you’d have e-mailed support@imageresizing.net, I could have answered your question immediately.

    As always, if there is anything I can help with, please shoot me an e-mail, or post on SO, and e-mail me a link 🙂 I update the http://imageresizing.net documentation 5-20 times per week on average to make things clearer or more detailed, so I’m always interested whenever someone’s confused about, since that typically means the documentation needs work, or needs to be linked to from more places.

    • 0