[纯前端实现图片等比压缩] —— 插件

流浪男

本帖最后由流浪男于 2015-6-29 13:14 编辑

很多朋友一直在寻找图片压缩类的处理，今天先将这个功能放出来，已经将他插件化，可以方便的调用压缩后的js只有2k，可以放心去调用,并针对机型做了下简单的处理，后面会继续完善

使用方法：
引入js

<script type="text/javascript" src="../script/aui_compress.min.js"></script>

复制代码

调用方法：

auiCompress(ret.data,{
width:300,
quantity:1,
start:function(){
//开始压缩
},
// 压缩成功
success: function (ret) {
console.log(JSON.stringify(ret));
}
});

复制代码

参数说明：

auiCompress(imageFile,options);
imageFile : 图片路径
options：　json
width: 压缩图片宽度
height: 压缩图片高度
quantifiy 压缩图片的质量
start 开始压缩回调
over 压缩结束后回调
fail 压缩失败后回调
success 成功压缩后，参数有origin（原图片路径） base64

复制代码

完整案例演示代码：

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
<title>APP</title>
<link rel="stylesheet" type="text/css" href="../css/api.css" />
<link rel="stylesheet" type="text/css" href="../css/common.css" />
<style>
#button {
margin: 15px 0;
width: 100%;
height:45px;
background:#1abc9c;
color:#ffffff;
font-size:14px;
text-align:center;
line-height:45px;
}
#report {
width:100%;
}
#report p {
margin-bottom:15px;
font-size:14px;
}
#report p img {
width: 100%;
}
</style>
</head>
<body>
<div id="button" onclick="getPicture();">选择图片</div>
<div id="report"></div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/aui_compress.min.js"></script>
<script type="text/javascript">
apiready = function(){
};
function getPicture(){
api.getPicture({
sourceType: 'library',
encodingType: 'jpg',
mediaValue: 'pic',
destinationType: 'url',
saveToPhotoAlbum: false
}, function(ret, err){
if(ret.data){
auiCompress(ret.data,{
width:300,
quantity:1,
// 压缩成功
success: function (ret) {
console.log(JSON.stringify(ret));
report('原始图片', ret.origin, ret.origin.size);
report('压缩后图片', ret.base64, ret.base64.length * 0.8);
}
});
}
});
}
function report(title, src, size) {
var img = new Image(),
size = (size / 1024).toFixed(2) + 'KB';
if(size === 'NaNKB') size = '';
img.onload = function () {
var content =
'<p>' + title + '（' + img.width + ' X ' + img.height + '）</p>' +
'<p>' + size + '</p>'+
'<p><img src="'+img.src+'"></p>';
$api.append($api.byId('report'),content);
};
img.src = typeof src === 'string' ? src : URL.createObjectURL(src);
}
</script>
</html>

复制代码

demo 下载

源文件：

效果：

小草

流浪大哥，有空统一优化一下版本

小草

安卓转化出来的base64是png编码的，无压缩率，需要额外的一个js去处理安卓的情况
jpeg_encoder_basic.js

shancha

已撸，谢谢分享~

疯子宇

谢谢分享~

yyyfx

感谢分享

loveDlhd

感谢分享

火花

不错，值得拥有

乐居者

楼主，怎么我的压缩后方向就便了那？先谢谢了

流浪男

乐居者发表于 2015-6-29 14:15
楼主，怎么我的压缩后方向就便了那？先谢谢了

请提供下你的机型，谢谢使用

乐居者

流浪男发表于 2015-6-29 14:18
请提供下你的机型，谢谢使用

iPhone 5s的

byronchen

谢谢楼主分享干货！