There is a two-dimensional array - bitmap - representing the image. That is a set of pics. Each pixel is encoded by 3 bytes - RGB. For example, this is ImageData for Canvas . The following parameters are known: image width, height, and dpi. It’s easy to display all this on canvas.

However, here is a special case: width = 5100, height = 6600 and dpi = 600.

That is, the picture is very large in itself, and here it is assumed to decrease it. Not strong in this topic, but as I understand it, you need to do the following.

  1. Determine the ppi of the monitor (as I understand it more correctly speak ppi), for example 96.
  2. Find the ratio of dpi images to the ppi monitor, for example 600/96 = 6.25.
  3. Divide the width and height of the image on the resulting ratio. That is 5100 / 6.25 = 816, 6600 / 6.25 = 1056.
  4. Display a compressed image with a new width and height.

There is a question - how to determine the ppi monitor. offsetWidth some sources on the network on this topic, I came to the conclusion that the easiest way is to create an element with a width of '1in', and then request it to offsetWidth . However, this method does not always work.

In general, now the questions:

  1. Do I understand the rules for drawing images correctly? (relations ppi and dpi, image compression, etc.)

  2. Are there any other ways to determine ppi? I read about media queries, but as I understood it css and did not figure out how to get this info through js. If anyone can explain in detail, I will be very grateful.

  3. How to compress a picture? Here there is an initial height and width, and it is necessary to receive in a compressed form. How to bypass an array of pixels and what to do with them?

  • Do you want a picture of the size, for example, 10 cm to be shown on the screen, also 10 cm? - splash58
  • @ splash58 did not understand the question. So far, I want to show a picture in my monitor in a normal size, and not 6 times wider. I as said is not strong in the rules for displaying pictures with dpi. - RussCoder
  • then it is not very clear why it is so difficult. you also have the size in pixels of the area to display and the size of the image in pixels. here with them and work. why do you need dpi. It is needed only if you want to recalculate the size of the image in inches, mm, etc. - splash58
  • @ splash58 Well, let's say, I want to display the picture in "100%", as it was intended when encoding it. It's like when viewing pdf or djvu scale so to speak. But your idea is correct, about the size of the display area - I can do without it at the beginning, although I want to know what and how. But I'm still interested in the question of how to compress the image. - RussCoder
  • look. dpi says the following - when displaying, place so many pixels by 1 inch. If you want to save the geometry, then yes, you need it and you need to know the density of the points of the monitor. And if it doesn’t matter, I don’t understand anything about the canvas, but the img attribute has a great scale for the image. Probably, I explain poorly, but so far I have not understood why you need dpi - splash58

0