前端JS图片压缩技术的几个插件收集（收藏）

最新推荐文章于 2024-07-04 16:21:42 发布

如何在5年薪百万

最新推荐文章于 2024-07-04 16:21:42 发布

阅读量1.1w

点赞数 4

分类专栏：前端技术 javasript

本文链接：https://blog.csdn.net/kouryoushine/article/details/97372181

版权

前端技术同时被 2 个专栏收录

14 篇文章 4 订阅

订阅专栏

javasript

7 篇文章 0 订阅

订阅专栏

背景

最近用到前端压缩图片的技术，虽说可以参考原理自己写，但是前辈花了很大精力写出来的插件可以帮助我们避免很多坑，直接拿来用吧。

插件1 compression.js

优点：使用简单，参数只有输入图片，压缩比例，输出图片。很少的代码量即可实现压缩和预览的效果。

<title>前端图片压缩</title>
<meta charset="utf-8">
<script src="jquery.min.js"></script>
<script type="text/javascript" src="compression.js"></script>
<style>
        #img{
	width: 100px;
	height: 50px;
	text-align: center;
	line-height: 50px;
	border: 1px solid #434343;
        }
   </style>
</head>
<body>
<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>
</body>
</html>

我最后选用的插件

compressorjs
https://github.com/fengyuanchen/compressorjs/blob/master/README.md#options
理由：
代码风格简洁，作者chenfengyuan有数个star破千的前端项目，实例很强。虽然点赞不如localResizeIMG（中国人比较多吧），但是使用起来确实很方便。下面一篇博客我会把我的使用案例分享出来。请到我的博客找这片文章，会告诉你如何使用。

如何在5年薪百万

关注

4
点赞
踩
22

收藏

觉得还不错? 一键收藏
3
评论
前端JS图片压缩技术的几个插件收集（收藏）

背景最近用到前端压缩图片的技术，虽说可以参考原理自己写，但是前辈花了很大精力写出来的插件可以帮助我们避免很多坑，直接拿来用吧。插件1 compression.js优点：使用简单，参数只有输入图片，压缩比例，输出图片。很少的代码量即可实现压缩和预览的效果。<title>前端图片压缩</title><meta charset="utf-8"><sc...
复制链接

扫一扫