apicloud apicloud

注册
查看: 8034|回复: 23

[APP开发技巧] 完美图片压缩并输出png图片

主题:
8
帖子:
43
云币:
163

[APP开发技巧] 完美图片压缩并输出png图片

8034 23 | 发表于 2015-8-29 00:28:44 |阅读模式 | |
本帖最后由 段鹏举 于 2015-11-17 14:54 编辑

DEMO体验




优点

  • 兼容IOS&Android,修复了IOS和Android某些版本已知的BUG(这也是插件最有意义的存在价值)。
  • 原生JS编写,不依赖例如jquery等第三方库。


使用

在页面引入<script src="./dist/lrz.bundle.js"></script>   ps:请绝对不要删除【dist】目录下的任何文件,那些是某些情况自动按需载入的文件。

然后
lrz('./xxx/xx/x.png')        .then(function (rst) {            // 处理成功会执行        })        .catch(function (err){            // 处理失败会执行        })        .always(function () {            // 不管是成功失败,都会执行        });
返回值是rst.base64

另外,可以使用apicloud的trans模块进行图片保存

示例:
lrz(ret.data)
                                .then(function (rst) {
                                 var trans = api.require('trans');
                                 var cacheDir=api.cacheDir
                                 var path=rst.base64.replace('data:image/jpeg;base64,','')
                              trans.saveImage({
                                                base64Str : path,
                                                album : false,
                                                imgPath : cacheDir+'/upload/',
                                                imgName : num+'.png'
                                        }, function(ret, err) {
                                                if (ret.status) {
                                                                var cacheDir=api.cacheDir
                                                                var item=cacheDir+'/upload/'+num+'.png';
                                                        html += '<div class="addpic"><img name="pics" src="' + item + '" width="68px" height="68px" />';
                                                                                                        html += '</div>'
                                                                                                        $api.append(elb, html);
                                                                                                        num++;
                                                                                                        api.toast({
                                                                msg:'图片压缩成功'
                                                        });
                                                } else {
                                                       alert(JSON.stringify(err))
                                                }
                                        });
                                    // 处理成功会执行
                                })

上传成功后再利用fs模块删除即可。。
function delImg(){
var cacheDir=api.cacheDir
for(var i=1;i<num;i++){
var fs = api.require('fs');
fs.remove({
    path: cacheDir+'/upload/'+i+'.png'
},function(ret,err){
    var status = ret.status;
    if (status) {

    }else {
        api.alert({msg:err.msg});
    }
});

}
}


另附上我压缩的图 嘿嘿。。




本帖子中包含更多资源    您需要 登录 才可以下载或查看,没有帐号?立即注册

1

查看全部评分

主题:
40
帖子:
200
云币:
221
发表于 2015-9-2 18:34:03 |
请问,图片压缩率的默认值在哪个js里设置

主题:
8
帖子:
43
云币:
163
 楼主| 发表于 2015-8-29 00:29:37 |
图上错了。。。。

主题:
8
帖子:
43
云币:
163
 楼主| 发表于 2015-8-29 00:31:19 |
源码~~~~~~~

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x

主题:
0
帖子:
39
云币:
108
发表于 2015-8-29 00:40:02 |
顶,非常不错!!!!!!!!!

主题:
56
帖子:
298
云币:
1159
发表于 2015-8-29 09:07:22 |
很好!!!!!!!!!!!!!!!

业余车手

UID:22414

主题:
8
帖子:
815
云币:
12667

版主勋章APICloud粉丝

发表于 2015-8-29 09:14:14 |
感谢分享

马路杀手

UID:48443

主题:
27
帖子:
206
云币:
451

一周年

发表于 2015-8-30 01:05:41 |
感觉不错。。到时候试试。

主题:
40
帖子:
200
云币:
221
发表于 2015-9-2 17:29:52 |
请问,要引源文件夹内的那些东西

主题:
8
帖子:
43
云币:
163
 楼主| 发表于 2015-9-2 19:04:06 |
Jack Sunny 发表于 2015-9-2 17:29
请问,要引源文件夹内的那些东西

dist里面的文件即可
123下一页
您需要登录后才可以回帖 登录 | 立即注册

快速回复 返回顶部 返回列表