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

1.服务端压缩
  • 1.hutool ,它是个java工具库,官网地址:https://hutool.cn/docs/#/
    图片工具部分有使用示例,缩放比例设置为0.5,压缩后的图片是原图的一半(宽度、高度)
ImgUtil.scale(
    FileUtil.file("c:/index_bg1.jpg"),
    FileUtil.file("c:/index_bg1_result.jpg"),
    0.5f//缩放比例
);
<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张图片压缩后的大小与效果
在这里插入图片描述
在这里插入图片描述
左边是原图,右边是压缩后的,图片大小差了一半,基本上没有失真

2.客户端压缩
import canvasResize from 'canvas-resize'

canvasResize(img, {
  crop: false,
  quality: 0.9,
  rotate: 0,
  callback(baseStr) {
    console.log(baseStr.length)
  }
})
<script type="text/javascript" src="compression.js"></script>

<P>当前压缩比例 0.5</P>
<div id="img">上传图片</div>
<br>
<p id="zz"></p>
<img id="jg" src="">
<script type="text/javascript">
   	 window.onload = function() {
		  var dd = new compression({
				domId:"img", // 上传图片的Dom 目前只支持id;
				type:"jpg", // 压缩后保存图片的类型,目前支持 jpeg , png   参数:jpeg png
				fidelity: .5,  // 压缩比例 (0,1]
				imgFile:function(base64){
					// alert(base64)  // 压缩好的回调
					$("#zz").text("以下为压缩后的图片");
					$("#jg").attr("src",base64);	
				}
		 })
   	 }
</script>
已标记关键词 清除标记
相关推荐
©️2020 CSDN 皮肤主题: Age of Ai 设计师:meimeiellie 返回首页