How can an image be cropped based on a set scale of random image?

Question

Working on allowing the upload of images which can range in a variety of size, then allowing to crop a predefined area of the image for a thumbnail.

The thumbnail size is predefined to 150x150. Using the Jcrop.js tool to select a section of the image.

Problem:

When displaying the uploaded image in a smaller size than the original image by implementing set height/width on the image rendered, then there is a scale factor that comes into play when selecting an area to crop.

You either have to scale down the cropping area proportionately or you have to scale the image in relation to the actual image's size in comparison to its displayed size.

Question:

How do I figure out the scale of the browser displayed image vs. original image? I am currently using the following code to save the image, but how would I take into consideration the scaling?

public static Image CropImage(Image originalImage, int x, int y, int width, int height)
    {
        var bmp = new Bitmap(width, height);
        bmp.SetResolution(originalImage.HorizontalResolution, originalImage.VerticalResolution);

        using (var graphic = Graphics.FromImage(bmp))
        {
            graphic.SmoothingMode = SmoothingMode.AntiAlias;
            graphic.InterpolationMode = InterpolationMode.HighQualityBicubic;
            graphic.PixelOffsetMode = PixelOffsetMode.HighSpeed;

            graphic.DrawImage(originalImage, new Rectangle(0, 0, width, height), x, y, width, height, GraphicsUnit.Pixel);

            return bmp;
        }
    }

Bonus Question:

Another problem I discovered, is that there seems to be no efficient way to transfer the original file's ImageFormat when creating a new Bitmap which creates a ImageFormatMemoryBMP and when you attempt to call Bitmap.Save(memorystream, original rawformat) it will blow up. And bitmap RawFormat has no setter.

So how can you set the format on a new bitmap?

Nick Martin Nick Martin · Accepted Answer · 2013-03-28T19:27:13

I think perhaps that this problem is solved purely on the front end, no need to use any server side for this.

Jcrop has a built in scale factor handler.

http://deepliquid.com/content/Jcrop_Sizing_Issues.html

Now you can use this in two ways, as I understand it. Either to 'resize' the image for you on the front end using 'box sizing', or you can tell it the 'truesize' of the image and it will work out the scale factor and handle the coordinates for you on it's own.

Box sizing

$('#cropbox').Jcrop({ boxWidth: 450, boxHeight: 400 });

True Size

$.Jcrop('#cropbox',{ trueSize: [500,370] });

Using the true size method you will need to invoke jcrop using the api method: http://deepliquid.com/content/Jcrop_API.html#API_Invocation_Method

var jcrop_api,
options = { trueSize: [500,370] };

$('#target').Jcrop(options,function(){
jcrop_api = this;
});

Good luck!

How can an image be cropped based on a set scale of random image?

1 Answers