CODEWITHSUNDEEP
c#wpfcroprectanglesimaging
Jesper Jensen
Jesper Jensen

Reputation: 595

Resize drawn rectangle to fit original image

I'm developing an application to manipulate images scanned on a wide-image scanner. These images are shown as a ImageBrush on a Canvas. On this Canvas they can a make Rectangle with the mouse, to define an area to be cropped.

My problem here is to resize the Rectangle according to the original image size, so that it crops the exact area on the original image.

I've tried many things so far and it's just sqeezing my brain, to figure out the right solution.
I know that I need to get the percent that the original image is bigger than the image shown on the canvas.

The dimentions of the original image are:

h: 5606
w: 7677

And when I show the image, they are:

h: 1058,04
w: 1910

Which gives these numbers:

float percentWidth = ((originalWidth - resizedWidth) / originalWidth) * 100;
float percentHeight = ((originalHeight - resizedHeight) / originalHeight) * 100;

percentWidth = 75,12049
percentHeight = 81,12665

From here I can't figure how to resize the Rectangle correctly, to fit the original image.

My last approach was this:

int newRectWidth = (int)((originalWidth * percentWidth) / 100);
int newRectHeight = (int)((originalHeight * percentHeight) / 100);
int newRectX = (int)(rectX + ((rectX * percentWidth) / 100));
int newRectY = (int)(rectY + ((rectY * percentHeight) / 100));

Hopefully someone can lead me in the right direction, because i'm off track here and I can't see what i'm missing.

Solution

    private System.Drawing.Rectangle FitRectangleToOriginal(
        float resizedWidth,
        float resizedHeight,
        float originalWidth,
        float originalHeight,
        float rectWidth,
        float rectHeight,
        double rectX,
        double rectY)
    {
        // Calculate the ratio between original and resized image
        float ratioWidth = originalWidth / resizedWidth;
        float ratioHeight = originalHeight / resizedHeight;

        // create a new rectagle, by resizing the old values
        // by the ratio calculated above
        int newRectWidth = (int)(rectWidth * ratioWidth);
        int newRectHeight = (int)(rectHeight * ratioHeight);
        int newRectX = (int)(rectX * ratioWidth);
        int newRectY = (int)(rectY * ratioHeight);

        return new System.Drawing.Rectangle(newRectX, newRectY, newRectWidth, newRectHeight);
    }

Upvotes: 1

Views: 1540

Answers (2)

xxbbcc
xxbbcc

Reputation: 17327

I think the only reliable option is to let your users zoom in to the image (100% or higher zoom level) and make a selection on part of the image. This way they can make an exact pixel-based selection. (Assuming that the purpose of your selection rectangle is to select part of an image.)

Your problem now is that you're using floating-point calculations because of the 75% zoom level and rounding errors will make your selection rectangles inaccurate. No matter what you do, when you try to make a selection on a shrinked image, you're not selecting exact pixels - you're selecting parts of pixels as you resize your rectangle. Since a partial pixel cannot be selected, the selection edges will be rounded up or down so you either select one pixel too many or one pixel too few in a given direction.

Another issue that I just noticed is that you distort your image - horizontally it's 75% zoom, vertically it's 81%. This makes it even harder for users because the image will be smoothed differently in the two directions. Horizontally 4 original pixels will be interpolated on 3 output pixels; vertically 5 original pixels will be interpolated on 4 output pixels.

Upvotes: 2

ranieuwe
ranieuwe

Reputation: 2296

You are actually doing a form of projection. Don't use percentages, just use the ratio between 5606 and 1058,4 = ~5.30. When the user drags the rectangle, reproject it which is selectedWidth * 5606/1058.4.

Upvotes: 1

Related Questions