Original link: https://www.zhangxinxu.com/wordpress/2023/09/js-jpg-png-compress-tinyimg-mini/
by zhangxinxu from https://www.zhangxinxu.com/wordpress/?p=10983 Xin space – Xin life
This article is welcome to share and aggregate, there is no need to reprint the full text, respect copyright, the circle is so big, if you need it urgently, you can contact for authorization.
1. Background of self-made tools
Since the writing is not fixed, it is often necessary to process the screenshots.
No matter which screenshot tool is used, the image saved in the clipboard (or ready to be downloaded) must be a lossless PNG image.
Lossless PNG images are relatively large in size, especially those with rich colors, which are several times larger than JPG images of the same size.
This will lead to many problems such as slow loading, high memory usage, and high traffic overhead when transmitting in web pages.
For example, in my blog posts, there is a strong need to optimize the size of the screenshots.
Under the Windows operating system, I always use the software Faststone Capture, which is very easy to use.
But under MacOS, there has been no satisfactory software.
I always use the tinypng website for size optimization.
But tinypng also has shortcomings, that is, it is impossible to change the size of the compressed image. For example, the original image is 2560*1920, and I want the image to be reduced to 512*384. At the same time, tinypng is helpless.
Then I use online PS, and I still need to log in to export the drafted online PS images. The foreign online PS website “Fort Fart” does not need to log in to export, but if you are not familiar with Photoshop software, it is not easy to operate.
All in all, there is a strong demand for image compression, and there is no suitable tool, so I decided to make a pure front-end JPG/PNG compression tool, which can not only compress, but also set the size of the image.
2. Make a shining debut
OK, after laying the groundwork for so long, it’s time to pull it out and have a look.
You can click here hard: JPG/PNG simple online resizing and compression tool
The complete access address is: https://ift.tt/tRu3qvn
My tool pages are all placed under the sp path, sp is the first two letters of special, and then the tool name is tinyimg, which should be easy to remember.
The figure below shows the layout effect on the desktop.
The middle is the operation area, the left side is the original image, and the right side is the preview image after compression.
Tool Highlights
- Support any image upload method, including direct clipboard paste, drag and drop upload, and traditional click button to select file upload.
- Support to choose the image format for compression and export (select JPG for colorful images).
- Resizing is supported.
- Batch compression is supported.
- Support mobile terminal.
- Pure front-end implementation, fast speed, good experience.
3. Implementation principle description
JPG front-end compression
JPG compression uses the toDataURL method of canvas.
canvas.toDataURL(mimeType, quality);
Where quality is the quality of the image.
But this method is only suitable for image/jpeg or image/webp, so PNG image compression cannot use this API.
PNG front-end compression
The front-end compression of PNG uses UPNG.js here, project address: https://github.com/photopea/UPNG.js
It’s still very easy to use. I use the following API for compression.
UPNG. encode(imgs, w, h, cnum, [dels])
Among them cnum is used to set the PNG compression loss, and 0 is lossless.
other
There is nothing else to say, such as uploading image analysis, resource downloading, etc., have been introduced in special articles before, and I am too lazy to expand.
In short, technical implementation is not difficult, but requires more accumulation.
zxx: Thanks to LuLu UI for providing style and component support.
4. Welcome to use and feedback
The above is the basic introduction of this tool, everyone is welcome to use it, it is free for life, you can add it to your favorites, so as not to forget it in the future.
Although it has been tested many times, personal negligence is inevitable, so if there are any problems in use, feedback is welcome.
And, for this tool, if you have any good ideas or good needs, you can also put it forward, and I will follow up and update it in time.
Well, that’s all, thank you for your continued support, love!
This article is an original article, welcome to share, do not reprint the full text, if you really like it, you can bookmark it, it will never expire, and will update knowledge points and correct errors in time, and the reading experience will be better.
Address of this article: https://www.zhangxinxu.com/wordpress/?p=10983
(End of this article)
This article is transferred from: https://www.zhangxinxu.com/wordpress/2023/09/js-jpg-png-compress-tinyimg-mini/
This site is only for collection, and the copyright belongs to the original author.