I have a process where a web user selects a photo for a profile image. User is then presented with a canvas to zoom, rotate and move their image within a square viewport. Once satisfied, the user submits and the original image along with the adjustment settings are posted to the server.

I need to find the most efficient way to produce the same end result using the original image but with the highest quality/size allowed.

I could apply the submitted scale to all the properties and get the exact outcome but it would be in the size of the "viewport" which is 290px-400px square depending on the user's device size. I need that final image to be the maximum size allowed for the job. i.e. if the max size is 1000x700, the final image would be 700x700 if the original image was large enough compared to the submitted scale.

Here are a couple of examples: enter image description here

I dont need the programming/syntax help I need the math help! Shouldnt matter but if it helps I am using C# for this.

Using the available variables in the example above, what would be the best approach to determine the maximum image size / scale allowed?

  • $\begingroup$ I'm not sure I understand exactly your problem but it seems like this could be simplified by using fractional 0-to-1 values to define where the crop box is in the image, instead of pixel values. Then it would apply equally to any size of image. $\endgroup$ Sep 7, 2022 at 17:09
  • $\begingroup$ Nathan, I think my problem is figuring out what my first problem is :D I think what I need (first) is to figure out what scale would give me the maximum allowed, cropped image size... In the above examples, max size is 1000x700. So with a square crop the max size would be 700x700. But what if the original image was 700x600? The max cropped size would be 600x600 (so there is no upsizing). I think I need to determine this and then I can apply that scale to all other properties and get the final image. Right? $\endgroup$
    – johnw182
    Sep 7, 2022 at 17:30


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.