apicloud apicloud

注册
查看: 10485|回复: 43

[APP开发技巧] [纯前端实现图片等比压缩] —— 插件

 

主题:
53
帖子:
333
云币:
552

APICloud粉丝APICloud毕业勋章一周年

[APP开发技巧] [纯前端实现图片等比压缩] —— 插件

 
10485 43 | 发表于 2015-6-29 12:58:20 |阅读模式 | |
本帖最后由 流浪男 于 2015-6-29 13:14 编辑

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


使用方法:
引入js
  1. <script type="text/javascript" src="../script/aui_compress.min.js"></script>
复制代码
调用方法:

  1. auiCompress(ret.data,{
  2.         width:300,
  3.         quantity:1,
  4.         start:function(){
  5.       //开始压缩
  6.         },
  7.     // 压缩成功
  8.     success: function (ret) {
  9.           console.log(JSON.stringify(ret));
  10.     }
  11. });
复制代码


参数说明:

  1. auiCompress(imageFile,options);
  2. imageFile : 图片路径
  3. options: json
  4.         width: 压缩图片宽度
  5.         height: 压缩图片高度
  6.         quantifiy 压缩图片的质量
  7.         start  开始压缩回调
  8.         over        压缩结束后回调
  9.         fail        压缩失败后回调
  10.         success        成功压缩后,参数有origin(原图片路径)  base64
复制代码


完整案例演示代码:
  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4.     <meta charset="utf-8">
  5.     <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
  6.     <title>APP</title>
  7.     <link rel="stylesheet" type="text/css" href="../css/api.css" />
  8.     <link rel="stylesheet" type="text/css" href="../css/common.css" />
  9.         <style>
  10.         #button {
  11.                 margin: 15px 0;
  12.                 width: 100%;
  13.                 height:45px;
  14.                 background:#1abc9c;
  15.                 color:#ffffff;
  16.                 font-size:14px;
  17.                 text-align:center;
  18.                 line-height:45px;
  19.         }
  20.         #report {
  21.                 width:100%;
  22.         }
  23.         #report p {
  24.                 margin-bottom:15px;
  25.                 font-size:14px;
  26.         }
  27.         #report p img {
  28.                 width: 100%;
  29.                
  30.         }
  31.         </style>
  32. </head>
  33. <body>
  34.     <div id="button" onclick="getPicture();">选择图片</div>
  35.     <div id="report"></div>
  36. </body>
  37. <script type="text/javascript" src="../script/api.js"></script>
  38. <script type="text/javascript" src="../script/aui_compress.min.js"></script>
  39. <script type="text/javascript">

  40.     apiready = function(){
  41.                
  42.     };
  43.     function getPicture(){
  44.             api.getPicture({
  45.                     sourceType: 'library',
  46.                     encodingType: 'jpg',
  47.                     mediaValue: 'pic',
  48.                     destinationType: 'url',
  49.                     saveToPhotoAlbum: false
  50.                 }, function(ret, err){
  51.                     if(ret.data){
  52.                         auiCompress(ret.data,{
  53.                                 width:300,
  54.                                 quantity:1,
  55.                         // 压缩成功
  56.                         success: function (ret) {
  57.                               console.log(JSON.stringify(ret));
  58.                               report('原始图片', ret.origin, ret.origin.size);
  59.                               report('压缩后图片', ret.base64, ret.base64.length * 0.8);
  60.                         }
  61.                     });
  62.                     }
  63.                 });
  64.     }
  65.     function report(title, src, size) {
  66.         var img = new Image(),
  67.             size = (size / 1024).toFixed(2) + 'KB';

  68.         if(size === 'NaNKB') size = '';

  69.         img.onload = function () {
  70.             var content =
  71.                 '<p>' + title + '(' + img.width + ' X ' + img.height + ')</p>' +
  72.                 '<p>' + size + '</p>'+
  73.                 '<p><img src="'+img.src+'"></p>';
  74.                         $api.append($api.byId('report'),content);
  75.         };
  76.         img.src = typeof src === 'string' ? src : URL.createObjectURL(src);
  77.     }
  78. </script>
  79. </html>
复制代码



demo 下载

源文件:




效果:



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

2

查看全部评分

入门司机

UID:36764

主题:
78
帖子:
473
云币:
30086

中秋节托马斯全旋装逼侠我李白贼6

发表于 2015-8-9 16:04:57 |
安卓转化出来的base64是png编码的,无压缩率,需要额外的一个js去处理安卓的情况
jpeg_encoder_basic.js

入门司机

UID:36764

主题:
78
帖子:
473
云币:
30086

中秋节托马斯全旋装逼侠我李白贼6

发表于 2015-8-9 16:06:01 |
流浪大哥,有空统一优化一下版本

新手上路

UID:82508

主题:
7
帖子:
71
云币:
312
发表于 2015-6-29 13:21:39 |
已撸,谢谢分享~

主题:
12
帖子:
81
云币:
290
发表于 2015-6-29 13:26:26 |
谢谢分享~   

主题:
30
帖子:
74
云币:
123
发表于 2015-6-29 13:29:03 |
最期待的还是图片剪裁功能(只需要在页面端实现剪裁点的坐标定位即可,实际剪裁功能可在服务器端搞定),版主,俺看好你哦,一口气把雷锋做到底吧

业余车手

UID:22414

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

版主勋章APICloud粉丝

发表于 2015-6-29 13:30:42 |
感谢分享

主题:
8
帖子:
323
云币:
4029

中秋节APICloud粉丝女朋友单身狗

发表于 2015-6-29 13:37:56 |
感谢分享

主题:
13
帖子:
185
云币:
1253
发表于 2015-6-29 13:56:52 |
不错,值得拥有

主题:
32
帖子:
85
云币:
257

APICloud粉丝

发表于 2015-6-29 14:15:21 |
楼主,怎么我的压缩后方向就便了那?先谢谢了

主题:
53
帖子:
333
云币:
552

APICloud粉丝APICloud毕业勋章一周年

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

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

主题:
32
帖子:
85
云币:
257

APICloud粉丝

发表于 2015-6-30 08:31:23 |
流浪男 发表于 2015-6-29 14:18
请提供下你的机型,谢谢使用

iPhone 5s的
12345下一页
您需要登录后才可以回帖 登录 | 立即注册

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