compressorjs
my-photohub
compressorjs | my-photohub | |
---|---|---|
8 | 25 | |
4,976 | 14 | |
- | - | |
2.1 | 10.0 | |
12 months ago | over 1 year ago | |
JavaScript | JavaScript | |
MIT License | BSD 2-clause "Simplified" License |
Stars - the number of stars that a project has on GitHub. Growth - month over month growth in stars.
Activity is a relative number indicating how actively a project is being developed. Recent commits have higher weight than older ones.
For example, an activity of 9.0 indicates that a project is amongst the top 10% of the most actively developed projects that we are tracking.
compressorjs
-
Client-side image compression with Supabase Storage
After researching a couple of different options, what I landed on was a package called compressorjs written by Chen Fengyuan. This library performs compression and resizing of images in the browser. I was a bit skeptical at first, but it's a cool project and has good browser support. How Compressorjs works is that it uses the HTML5 canvas element to read the original image data and perform lossy transformations to compress and resize the image. There's a whole bunch of transformation options. For my project, what I have found is simply changing the maximum width of the image to 600px and slightly reducing the quality has greatly reduced the file sizes.
-
One Click to Optimize Images, Create Repo and Making Commit
You can change image quality or pass different options. I set customized mimeType and width by passing option parameter here. You can find more usages from compressor.js original documentation.
-
How to compress images on client-side
I will use compressorjs, a tiny librarie (3.8 kB minzipped). Compressor.js uses the Browser's native HTMLCanvasElement.toBlob() API to do the compression work, which means it is lossy compression.
-
Compressing images on client side before upload
(I checked out : imagemin, compress.js, compressorjs and some small others)
-
Django CK editor with client side image shrinker
Django CK editor comes with default image shrinker based on Pillow, But Pillow sucks at image shrinking, A frontend library called compressorjs does 5 times the Image quality with 5 times smaller the size.
-
12 JavaScript Image Manipulation Libraries For Your Next Web App
MORE INFO
-
Made a Web App to reduce Image Size by up to 90%, No file Size Limit & Works Offline | compressimage.io
You don't actually need any web services. Just import the compressorjs library and the UPNG.js library on client side(frontend) and then before uploading the data to server compress the image. These libraries were actually written for frontend compression by their respective owners. https://github.com/photopea/UPNG.js (25kb) https://github.com/fengyuanchen/compressorjs (8kb)
my-photohub
-
2022 in Review
1) My Photohub 📸
-
2022 Highlights: Open Source Development! ✨
1. My favorite repository: My-Photohub 📸
-
The storm before the calm: finals week
I picked my favorite Seneca College project my-photohub and successfully created two pull requests there.
-
One Click to Optimize Images, Create Repo and Making Commit
Continuing from last post, I have completed my feature that produces optimized images, create a remote repository and make a commit with the files. My PR may be updated, but I think the change would not be so big from now.
-
✨Day in the life of a college student during finals week - self reflection blog
1) The open-source contributions are going well! - I was able to successfully make pull requests to flutter and to my-photohub - I am currently working on responding to the issues I worked on.
-
Final thoughts on contribution
For the following PR I had to come up with logo for the project.
-
Release 0.4 Progress
I have had my pull request merged for creating the UI for creating a new project. What I have created is purely visual and has little functionality. With my contribution, I have integrated my UI with what already exists.
-
Release 0.4 Planning
For 0.4, I plan to create the UI for my-photohub. I am choosing this project because I thought the concept of it was interesting. Also, I wanted to work on a React project, I had previously worked on a personal project using React and wanted to put that practice to use on a real project. Another reason I chose this project was because did not want to spend too much time looking for an external project to work on that was viable.
-
Making Progressive Web App
Continuing on my story for My PhotoHub Image optimization GitHub Action, my approach was to convert files using JavaScript framework Sharp and shell script creates a repo and pushes the files to it. I pushed my script with my questions to ask how we should deploy the app. With this PR, I wanted to make sure my approach was ok and what the next steps would be.
-
December goals
My Photohub: I have already contributed to this project a few weeks ago where I created the UI of the progressive web app (PWA) using React. I plan on working on the other issues filed for this project and try to get closer to the finished product of this project.
What are some alternatives?
cropperjs - JavaScript image cropper.
cve-bin-tool - The CVE Binary Tool helps you determine if your system includes known vulnerabilities. You can scan binaries for over 200 common, vulnerable components (openssl, libpng, libxml2, expat and others), or if you know the components used, you can get a list of known vulnerabilities associated with an SBOM or a list of components and versions.
sharp - High performance Node.js image processing, the fastest module to resize JPEG, PNG, WebP, AVIF and TIFF images. Uses the libvips library.
rahat-agency - Agency management system for Rahat
pica - Resize image in browser with high quality and high speed
ifme - Free, open source mental health communication web app to share experiences with loved ones
UPNG.js - Fast and advanced PNG (APNG) decoder and encoder (lossy / lossless)
glific-frontend - Frontend for the Glific platform
squoosh - Make images smaller using best-in-class codecs, right in the browser.
vscode-seneca-college - VSCode Extension for Seneca College Developers
jimp - An image processing library written entirely in JavaScript for Node, with zero external or native dependencies.
pr-approve-generator - :rocket: Generate Approve comment for Pull Requests