I need to use canvas to process a picture uploaded by the user. The size uploaded by the user may be very large, for example, it will exceed the width and height of the current browser window, so I scale it to the visible area of the browser. inside, and then draw it onto the canvas, but this is equivalent to reducing the user's image. After the canvas is processed, is there a way to restore the processed image to its original size without causing blur?
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
The width and height of the canvas are set to the same as the original size of the image, but style is used to scale the canvas to the visible area. This way the image will not be compressed
Thank you for the invitation. Although I would like to answer you, I haven’t tried it, so I don’t know. Of course you can try it yourself, it won’t take much time anyway.
But we can change our thinking. Why do you want to reduce the image and draw it on canvas?
Isn’t it possible to scale the image to the visible area without max-width or max-height? This is just the image being reduced on the surface. In fact, the naturalWidth and naturalHeight have not changed, so the zoom restoration is actually unnecessary.
You can use img to display within the visible area of the browser. Do not use canvas. Canvas is used to process images. If you have to display the image being processed by the canvas, then you can just create another off-screen canvas, then scale the related processing proportionally, and finally save the off-screen canvas.
I don’t know if I made it clear.
HTML5 image upload preprocessing https://juejin.im/entry/5933e...