2016-08-05更新：
下方的代码是比较OLD的了，是通过js进行图片的剪切 旋转 再生成，效率较低。
后来又整合了一个利用native.js本地接口的压缩代码 ，链接在这
。页面中有详细的说明，需要的童鞋们可以参考以下。

源码地址 https://github.com/phillyx/MUIDemos/tree/dce9283ea3e0726ccff0e8ef5b25fa028025ac69

代码整合了
1.多串君

  1. 伟子
    两个人的demo,
    其中resize原来的filereader在5 中更改为plus.io.FileReader()方不报错。
    如有错误，请不吝批评指正。

更新日志：
2015-05-09 1020450921@qq.com
1.修复了ios下无法获取图片宽高的问题：
ios下不在img.onload中是获取不到文件对象的。

新增了最大宽度（高度）的判别，按比例压缩。
具体代码如下：

  1. <!DOCTYPE html>
  2. <html>  
  3.  
  4. <head>
  5.     <meta charset="utf-8">
  6.     <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
  7.     <title></title>
  8.     <link href="http://ask.dcloud.net.cn/../../../css/mui.min.css" rel="stylesheet" />
  9.     <style type="text/css">
  10.         body {
  11.             background-color: #efeff4;
  12.         }
  13.         .mui-content {} .mui-content a {
  14.             color: #8F8F94;
  15.         }
  16.         .mui-content a.active {
  17.             color: #007aff;
  18.         }
  19.         .mui-title {
  20.             font-family: simhei;
  21.         }
  22.         .btn_1 {
  23.             position: absolute;
  24.             bottom: 100px;
  25.             left: 10px;
  26.             right: 10px;
  27.         }
  28.         .btn_2 {
  29.             position: absolute;
  30.             bottom: 20px;
  31.             left: 10px;
  32.             right: 10px;
  33.         }
  34.         .mui-btn-block {
  35.             width: 90%;
  36.             margin: 0 auto;
  37.         }
  38.         body {
  39.             overflow: hidden;
  40.         }
  41.         .showimg {
  42.             margin: 20px 10px auto 10px;
  43.             text-align: center;
  44.         }
  45.     </style>
  46. </head>  
  47.  
  48. <body>
  49.     <header class="mui-bar mui-bar-nav">
  50.         <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
  51.         <h1 class="mui-title">上传身份证照片</h1>
  52.         <a class="mui-pull-right mui-icon mui-icon-upload" onclick="imgupgrade()"></a>
  53.     </header>
  54.     <!--
  55. 作者：1020450921@qq.com
  56. 时间：2015-04-24
  57. 描述：参考 http://ask.dcloud.net.cn/question/2089
  58. -->
  59.     <div class="mui-content">
  60.         <div class="showimg">  
  61.  
  62.         </div>
  63.         <button type="button" class="mui-btn mui-btn-primary mui-btn-block  btn_1" onclick="galleryImgs()">从相册中选择图片</button>
  64.         <br>
  65.         <button type="button" class="mui-btn mui-btn-success mui-btn-block btn_2" onclick="cameraimages()">拍照</button>
  66.     </div>
  67. </body>
  68. <script src="../../../js/mui.min.js"></script>
  69. <script src="../../../js/binaryajax.js" type="text/javascript" charset="utf-8"></script>
  70. <script src="../../../js/exif.js" type="text/javascript" charset="utf-8"></script>
  71. <script src="../../../js/canvasResize.js" type="text/javascript" charset="utf-8"></script>  
  72.  
  73. <script type="text/javascript">
  74.     mui.init();
  75.     mui.plusReady(function() {})  
  76.  
  77.            //上传单张图片
  78.     function galleryImg() {
  79.         //每次拍摄或选择图片前清空数组对象
  80.         f1.splice(0, f1.length);
  81.         document.getElementsByClassName("showimg")[0].innerHTML = null;
  82.         // 从相册中选择图片
  83.         mui.toast("从相册中选择一张图片");
  84.         plus.gallery.pick(function(path) {
  85.             showImg(path);
  86.         }, function(e) {
  87.             mui.toast("取消选择图片");
  88.         }, {
  89.             filter: "image",
  90.             multiple: false
  91.         });
  92.     }  
  93.  
  94.     function galleryImgs() {
  95.             //每次拍摄或选择图片前清空数组对象
  96.             f1.splice(0, f1.length);
  97.             document.getElementsByClassName("showimg")[0].innerHTML = null;
  98.             // 从相册中选择图片
  99.             mui.toast("从相册中选择不超过两张图片");
  100.             plus.gallery.pick(function(e) {
  101.                 if (e.files.length != 2) {
  102.                     mui.toast('请选择身份证正面和背面照片共两张');
  103.                     return false;
  104.                 }
  105.                 for (var i in e.files) {
  106.                     showImg(e.files[i]);
  107.                 }
  108.             }, function(e) {
  109.                 mui.toast("取消选择图片");
  110.             }, {
  111.                 filter: "image",
  112.                 multiple: true
  113.             });
  114.         }
  115.         // 拍照添加文件  
  116.  
  117.     function cameraimages() {
  118.             //每次拍摄或选择图片前清空数组对象
  119.             f1.splice(0, f1.length);
  120.             document.getElementsByClassName("showimg")[0].innerHTML = null;
  121.             var cmr = plus.camera.getCamera();
  122.             cmr.captureImage(function(p) {
  123.                 plus.io.resolveLocalFileSystemURL(p, function(entry) {
  124.                     var localurl = entry.toLocalURL(); //把拍照的目录路径，变成本地url路径，例如file:///........之类的。
  125.                     showImg(localurl);
  126.                 });
  127.             }, function(e) {
  128.                 mui.toast("很抱歉，获取失败 "   e);
  129.             });
  130.         }
  131.         // 全局数组对象，添加文件,用于压缩上传使用
  132.     var f1 = new Array();  
  1.     function imgupgrade() {
  2.             mui.toast('后台联调时启用上传功能');
  3.             return;
  4.             var wt = plus.nativeUI.showWaiting();
  5.             var url = '后台地址';
  6.             var dataType = 'json';
  7.             //发送数据
  8.             var data = {
  9.                 files1: f1 //base64数据
  10.             };
  11.             mui.post(url, data, success, dataType);
  12.         }
  13.         //成功响应的回调函数
  14.     var success = function(response) {
  15.         plus.nativeUI.closeWaiting();
  16.         if (response != null) {
  17.             alert("上传成功");
  18.         }
  19.     }
  20. </script>  
  1. function showImg(url) {
  2.     // 兼容以“file:”开头的情况
  3.     if (0 != url.toString().indexOf("file://")) {
  4.         url = "file://" + url;
  5.     }
  6.     var div = document.getElementsByClassName("showimg")[0];
  7.     var img = new Image();
  8.     img.src = ur    l; // 传过来的图片    路径在这里用。
  9.     img.onclick = function () {
  10.         plus.runtime.openFile(url);
  11.     };
  12.     img.onload = functi        on() {
  13.         var tmph = img.height;
  14.         var tmpw = img.width;
  15.         var isHengTu = tmpw > tmph;
  16.         var max = Math.max(tmpw, tmph);
  17.         var min = Math.min(tmpw, tmph);
  18.         var bili = min / max;
  19.         if (max > 1200) {
  20.             max = 1200;
  21.             min = Math.floor(bili * max);
  22.         }
  23.         tmph = isHengTu ? min : max;
  24.         tmpw = isHengTu ? max : min;
  25.         img.style.border = "1px solid rgb(200,199,204)";
  26.         img.style.margin = "10px";
  27.         img.style.width = "150px";
  28.         img.style.height = "150px";
  29.         img.onload = null;
  30.         plus.io.resolveLocalFileSystemURL(url, function (entry) {
  31.             entry.file(function (file) {
  32.                 console.log(file.size + '--' + file.name);
  33.                 canvasResize(file, {
  34.                     width: tmpw,
  35.                     height: tmph,
  36.                     crop: false,
  37.                     quality: 50, //压缩质量
  38.                     rotate: 0,
  39.                     callback: function (data, width, height) {
  40.                         f1.push(data);
  41.                         img.src = data;
  42.                         div.appendChild(img);
  43.                         plus.nativeUI.closeWaiting();
  44.                     }
  45.                 });
  46.             });
  47.         },
  48.             function (e) {
  49.                 plus.nativeUI.closeWaiting();
  50.                 console.log(e.message);
  51.             });
  52.     };
  53. };

原文 分享图片压缩上传demo,可以选择一张或多张图片也可以拍摄照片

分享图片压缩上传demo,可以选择一张或多张图片也可以拍摄照片的更多相关文章

  1. 三款不错的图片压缩上传插件(webuploader+localResizeIMG4+LUploader)

    涉及到网页图片的交互,少不了图片的压缩上传,相关的插件有很多,相信大家都有用过,这里我就推荐三款,至于好处就仁者见仁喽: 1.名气最高的WebUploader,由Baidu FEX 团队开发,以H5为 ...

  2. Html5+asp.net mvc 图片压缩上传

    在做图片上传时,大图片如果没有压缩直接上传时间会非常长,因为有的图片太大,传到服务器上再压缩太慢了,而且损耗流量. 思路是将图片抽样显示在canvas上,然后用通过canvas.toDataURL方法 ...

  3. 纯原生js移动端图片压缩上传插件

    前段时间,同事又来咨询一个问题了,说手机端动不动拍照就好几M高清大图,上传服务器太慢,问问我有没有可以压缩图片并上传的js插件,当然手头上没有,别慌,我去网上搜一搜. 结果呢,呵呵...诶~又全是基于 ...

  4. springMVC多图片压缩上传的实现

    首先需要在配置文件中添加配置: <!--配置文件的视图解析器,用于文件上传,其中ID是固定的:multipartResolver--> <bean id="multipar ...

  5. 基于vue + axios + lrz.js 微信端图片压缩上传

    业务场景 微信端项目是基于Vux + Axios构建的,关于图片上传的业务场景有以下几点需求: 1.单张图片上传(如个人头像,实名认证等业务) 2.多张图片上传(如某类工单记录) 3.上传图片时期望能 ...

  6. 基于H5+ API手机相册图片压缩上传

    // 母函数 function App(){} /** * 图片压缩,默认同比例压缩 * @param {Object} path * pc端传入的路径可以为相对路径,但是在移动端上必须传入的路径是照 ...

  7. js 图片压缩上传（base64位）以及上传类型分类

    一.input file上传类型 1.指明只需要图片 <input type="file" accept='image/*'> 2.指明需要多张图片 <input ...

  8. HTML多图片压缩上传

    本文介绍的是多张图片在前端统一压缩后再通过ajax提交给后台处理的业务,使用到的是LocalResizeIMG.js插件. 一.首先介绍项目结构 二.分享引用核心文件,这里没有分享CSS文件,因为没有 ...

  9. js 图片压缩上传(纯js的质量压缩，非长宽压缩)

    下面是大神整理的demo,很实用,这里存一下备用,感谢大神! 此demo为大于1M对图片进行压缩上传 若小于1M则原图上传,可以根据自己实际需求更改. demo源码如下 <!DOCTYPE ht ...

随机推荐

  1. VUE CLI3 less 全局变量引用

    方法一 1.添加依赖 style-resources-loader 2.vue.config.js中添加 module.exports = { pluginOptions: { 'style-reso ...

  2. js原生方法的重写

    讲干货,不啰嗦,通过prototype可以获取到JavaScript的原型对象,进而可以在对象原型上添加新的属性和方法,当该方法与原方法名称一样时会覆盖原方法既:重写,当不一样时既:添加 如:实现数组 ...

  3. 最近发现了一篇讲解Vue的虚拟DOM,diff很棒的文章，特定记录转载一下

    本文章是转载的,为了方便以后复习,特地记录一下.他人请去原地址观看!!! 文章原地址:https://blog.csdn.net/m6i37jk/article/details/78140159 作者 ...

  4. CVE-2018-2879 - anniversary

    For the anniversary of the discovery of CVE-2018-2879 by Sec Consult (https://sec-consult.com/en/blo ...

  5. Orion (system-on-a-chip)

      From Wikipedia: Orion is a system-on-a-chip manufactured by Marvell Technology Group and used in n ...

  6. 使用JavaScript实现录入信息生成名片

    首先是布局: 一个大的盒子模型套两个小的盒子模型:左边是录入信息生成界面,右边是名片显示界面. 框架: 这里新建一个css文件,用于外部链接使用装饰 /*最外层div,主框架*/ .frame{ wi ...

  7. C# 设置鼠标光标位置

    C# 设置鼠标光标位置 using System.Drawing; using System.Runtime.InteropServices; namespace ZB.QueueSys.Common ...

  8. CodeForces 768E SG函数 整数划分 Game of Stones

    一个标准的NIM游戏 加上一条规则:每堆石子对于每个数目的石子只能被取一次 可以SG打表 dp[i][j]表示现在有i个石子 j是可以取的石子数的状压 第i位为1就表示i个石子没被取过 #includ ...

  9. TODO 疑问：java中的工厂类，在实际项目中如何运用

    正在读core of java,工厂类一直没搞懂.感觉和静态方法相类似,但是不知道是怎么运用在实际中. 20190711: 读了设计模式,里面给出的解读是这样的 Define an interface ...

  10. 利用Js的console对象，在控制台打印调式信息测试Js

    一次偶然的机会,打开百度的时候按下了F12,然后就见控制台里面输出了百度的招聘广告,感觉挺帅气的,再然后就有了这篇博文. 既然可以这样在控制台输出信息,那以后再调试Js的时候不就可以省去很多麻烦了嘛! ...