You may set compressor options with new Compressor(file, options). addEventListener ( 'change', ( e ) => ) It also has an API/CLI tool to compress multiple images or to integrate the app within your own JS app.Import axios from 'axios' import Compressor from 'compressorjs' document. Squoosh is a popular image compressing web app maintained and open-sourced by google. Update: Dec 2022 Another interesting contender – Squoosh Besides resizing there are a lot other features like filters, transformations, corrections, etc. Check out its Demo to get a gist of its capability. Photon is an image processing library made in wasm that can be run over the web. InitialQuality: number // optional, initial quality value between 0 and 1 (default: 1) MaxIteration: number, // optional, max number of iteration to compress the image (default: 10)ĮxifOrientation: number, // optional, see įileType: string, // optional, fileType override UseWebWorker: boolean, // optional, use multi-thread web worker, fallback to run in main-thread (default: true) OnProgress: Function, // optional, a function takes one progress argument (percentage from 0 to 100) Do not forget to check the Caveat part on the official doc. but, automatically reduce the size to smaller than the maximum Canvas size supported by each browser. MaxWidthOrHeight: number, // compressedFile will scale down by ratio to a point that width or height is smaller than maxWidthOrHeight (default: undefined) MaxSizeMB: number, // (default: Number.POSITIVE_INFINITY) Import imageCompression from 'browser-image-compression' Npm install browser-image-compression -save Here’s the link to the Demo followed by a small code snippet. Again, as the previous libs, expect lossy compression from it. It has good browser support and is well maintained too. If that’s not an issue for you then this can be a good alternative as it allows offloading processing to web workers through its options thereby keeping the main thread ready for other tasks. press(file, 0.9) // compress image by quality (0.1 - 0.9)īrowser image compression library is also a good alternative, however it is a bit heavy in terms of weight standing at about 50 Kb minzipped. pressAccurately(file, 200) // compress to 200 kB Import * as imageConversion from 'image-conversion' Here’s a Demo of the same, followed by a small snippet demonstrating its setup As of Aug 2021, it is well maintained and has good community and browser support. It is a pretty light-weight library standing at about 2 KB minzipped. As you might have guessed, just like the previous package, image-coversion too performs lossy compression using the Javascript’s native Canvas API. We like Image-conversion library due to the fact that it allows you to set a maximum output file size and that it exposes helper methods to covert an image to canvas or to get the dataURL from the canvas. Here’s a live Demo to see it and a small code snippet to get it working – Its usage is also pretty straightforward. It is a well maintained library having good community support. Size-wise it stands at around 3.5 KB minzipped. You sure can use the code found at the aforementioned link, however for those looking to avoid rewriting code, here’s a list of libraries to compress images with pure javascript.Ĭompressorjs uses the browser’s native canvas.toBlob API which also means that the compression is lossy. The canvas API can then be used to be resize, compress the image as needed before being sent to the server. The trick is to first convert the image file into Blob data which can then be passed to the canvas element. gif, …)Ĭompressing images with Javascript has become quite simple due to the Canvas element. Supports all major image formats (.jpg.Fine control over the image resolution and image quality.Processing is done at the client side saving you some processing cycles at the server.Decreasing image size means sending lesser data to the server resulting in faster uploads.How about doing this at the client side and compressing the image before it reaches the server? Let’s see how to compress images with pure javascript and the advantages of doing so.Īdvantages of compressing images at the client side: A common solution so far was to resize the image after it was uploaded to the server. As developers, we may not need large images (>5mb) especially if you’re using it for a profile picture or so. These days, most of the photos generated by our devices are quite large in resolution and in size.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |