How does the img tag in html control the size of the saved picture?

the scenario is like this. I need to use canvas to generate an image, which can be achieved by zooming in on the canvas and drawing elements, but this causes the width and height of the generated image to be scaled up proportionally, and the resulting image will be much clearer if the size is reduced by multiple.

I want to keep the img style in a fixed area, which may be seriously inconsistent with the original scale, but the saved picture size is normal, that is, it has not been enlarged, how to do it?

in addition, I have tried this, and the second parameter defaults to 0.92. After testing, it is found that setting it to 1 does not help. The sizes of the two images are exactly the same.

var fullQuality = canvas.toDataURL("image/jpeg", 1.0);
Jul.03,2022

Why not consider limiting the width and height when drawing to canvas, and then set the width and height of canvas to the width and height of the picture?

Menu