图片压缩-服务端压缩与客户端压缩

左手的ㄟ右手 2023-06-19 09:38 40阅读 0赞

##### 1.服务端压缩 #####

*  1.**hutool** ，它是个java工具库，官网地址：[https://hutool.cn/docs/\#/][https_hutool.cn_docs]  
    图片工具部分有使用示例，缩放比例设置为0.5，压缩后的图片是原图的一半(宽度、高度)

ImgUtil.scale(
        FileUtil.file("c:/index_bg1.jpg"),
        FileUtil.file("c:/index_bg1_result.jpg"),
        0.5f//缩放比例
    );

*  2.**Thumbnails**，它是google使用的开源的工具类，可在不改变原图大小情况下，压缩原图的质量，来减少图片大小，github地址：[https://github.com/coobird/thumbnailator][https_github.com_coobird_thumbnailator]

<dependency>
       <groupId>net.coobird</groupId>
       <artifactId>thumbnailator</artifactId>
       <version>0.4.8</version>
    </dependency>

Thumbnails.of("c:/index_bg1.jpg")  //原图文件的路径
            .scale(1f) 	               //scale是指定图片的大小，值在0到1之间，1f就是原图大小
            .outputQuality(0.5f) 	   //图片的质量，值也是在0到1，越接近于1质量越好
            .toFile("c:/index_bg1_result.jpg"); //压缩后文件的路径

这个工具无法正确压缩出png格式的图片，因为png本身就是一种无损的图片格式，而jpg是一种压缩的图片格式，因此可以把png格式输出为 jpg 来达到压缩目的

Thumbnails.of("c:/index_bg2.png")
           .scale(1f)
           .outputQuality(0.5f)
           .outputFormat("jpg")
           .toFile("c:/index_bg2_result.jpg");

来看看2张图片压缩后的大小与效果  
![在这里插入图片描述][20191205151318401.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly96aHV5dS5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70]  
左边是原图，右边是压缩后的，图片大小差了一半，基本上没有失真

##### 2.客户端压缩 #####

*  1.插件1：使用开源组件 imgResize，github地址：[https://github.com/CommanderXL/imgResize][https_github.com_CommanderXL_imgResize]

import canvasResize from 'canvas-resize'
    
    canvasResize(img, { 
      crop: false,
      quality: 0.9,
      rotate: 0,
      callback(baseStr) { 
        console.log(baseStr.length)
      }
    })

*  2.插件2：compression.js，github地址：[https://github.com/fengyuanchen/compressorjs/blob/master/README.md][https_github.com_fengyuanchen_compressorjs_blob_master_README.md]

[https_hutool.cn_docs]: https://hutool.cn/docs/#/
[https_github.com_coobird_thumbnailator]: https://github.com/coobird/thumbnailator
[20191205151318401.png]: https://img-blog.csdnimg.cn/20191205151318401.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly96aHV5dS5ibG9nLmNzZG4ubmV0_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191205151443316.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly96aHV5dS5ibG9nLmNzZG4ubmV0,size_16,color_FFFFFF,t_70
[https_github.com_CommanderXL_imgResize]: https://github.com/CommanderXL/imgResize
[https_github.com_fengyuanchen_compressorjs_blob_master_README.md]: https://github.com/fengyuanchen/compressorjs/blob/master/README.md