Search code examples
javascriptalgorithmimage-processingresize-image

Resize preview image based on original image output percentage

I need some help with a resizing algorithm.

Scenario:

  • There is an original print-ready image
  • There is a preview of this origiginal image to show in the browser. (Let's say with a width of 750px)

From an external system I receive cropping data about the original image. Now I have to display the same cropping-frame on the preview image.

The preview image is placed into an HTML img-tag. The jquery guillotine plugin will be attached to the element to display the image in a "cropping-frame". (https://github.com/matiasgagliano/guillotine)

I managed to calculate the right width, height, x, y, ... The problem is about setting the right scale for the preview image.

These are the parameters that are returned from the external system:

  • Resize percentage of the original image ( = outputPct)
  • Ratio of how much the preview image has resized (previewWidth / originalWidth = previewRatio) (- width, height, x, y, .... )

Problem:

How to calculate the scale for the preview image based on the paramters above? It is not possible to just use the outputPct because:

  • If the original outputPct > 1, then the preview needs to be zoomed in procently more
  • If the original outputPct = 1, then the preview needs to be zoomed at 100%
  • If the original outputPct < 1, then the preview needs to be zoomed in procently less

The output of the preview needs to be exactly the same as the output of the real image.

Allready tried multiple variations, but haven't managed to find a proper solution. Propably need to implement a more mathematical solution to solve this issue.

Thanks in advance!

Solution

  • Thanks for the help! After searching for days, I found out that it wasn't a wrong outputPct. The problem was the DPI. Previews are always generated at 96dpi and originals can be any dpi. When calculating the scale I needed to make sure that I multiplied the outputPct with the dpiRatio.