I took the above image and submitted it into our file input. optimalBlob represents the image with the smallest size among both the compressed versions and the initial image. We now can compress images whenever the user inputs an image on the client. If the initial image was smaller, we can use it instead. Finally, we check if our compressed version is smaller than the initial image.
Then, we pick the smaller blob out of the two to be our compressed output and display it to the user. To follow along, create a new project with the following files:įirst, we create two compressed images with differing scales: the ratio of MAX_WIDTH and the initial image’s width and the ratio of MAX_HEIGHT and the initial image’s height (You can parameterize MAX_WIDTH and MAX_HEIGHT based on the use case). Resize and compress image with HTML Canvas After the compression, we can then send the images to the server, reducing upload time and the work the server must do. Thankfully, with HTML Canvas, we can compress our images on the client itself. Also, since profile pictures don’t need to be extremely detailed, it would be nice to compress them and save space. Since high-quality images take up several MB, it is costly to send them over the network to the server. One way is to make the client do some of the work.Ĭonsider uploading images for profile pictures.
There are multiple ways of optimizing server performance.
#Javascript pixi.js image compress code#
All the code for this project is linked on GitHub. Huge shoutout to Codú Community for inspiring this blog. If you prefer reading it from there, please do check it out. This article was originally posted on Medium.
0 kommentar(er)
