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

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

代码整合了
1.多串君

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

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

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


<!DOCTYPE html>  
<html>  

<head>  
    <meta charset="utf-8">  
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />  
    <title></title>  
    <link href="http://ask.dcloud.net.cn/../../../css/mui.min.css" rel="stylesheet" />  
    <style type="text/css">  
        body {  
            background-color: #efeff4;  
        }  
        .mui-content {} .mui-content a {  
            color: #8F8F94;  
        }  
        .mui-content a.active {  
            color: #007aff;  
        }  
        .mui-title {  
            font-family: simhei;  
        }  
        .btn_1 {  
            position: absolute;  
            bottom: 100px;  
            left: 10px;  
            right: 10px;  
        }  
        .btn_2 {  
            position: absolute;  
            bottom: 20px;  
            left: 10px;  
            right: 10px;  
        }  
        .mui-btn-block {  
            width: 90%;  
            margin: 0 auto;  
        }  
        body {  
            overflow: hidden;  
        }  
        .showimg {  
            margin: 20px 10px auto 10px;  
            text-align: center;  
        }  
    </style>  
</head>  

<body>  
    <header class="mui-bar mui-bar-nav">  
        <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  
        <h1 class="mui-title">上传身份证照片</h1>  
        <a class="mui-pull-right mui-icon mui-icon-upload" onclick="imgupgrade()"></a>  
    </header>  
    <!--  
作者：1020450921@qq.com  
时间：2015-04-24  
描述：参考 http://ask.dcloud.net.cn/question/2089  
-->  
    <div class="mui-content">  
        <div class="showimg">  

        </div>  
        <button type="button" class="mui-btn mui-btn-primary mui-btn-block  btn_1" onclick="galleryImgs()">从相册中选择图片</button>  
        <br>  
        <button type="button" class="mui-btn mui-btn-success mui-btn-block btn_2" onclick="cameraimages()">拍照</button>  
    </div>  
</body>  
<script src="../../../js/mui.min.js"></script>  
<script src="../../../js/binaryajax.js" type="text/javascript" charset="utf-8"></script>  
<script src="../../../js/exif.js" type="text/javascript" charset="utf-8"></script>  
<script src="../../../js/canvasResize.js" type="text/javascript" charset="utf-8"></script>  

<script type="text/javascript">  
    mui.init();  
    mui.plusReady(function() {})  

           //上传单张图片  
    function galleryImg() {  
        //每次拍摄或选择图片前清空数组对象  
        f1.splice(0, f1.length);  
        document.getElementsByClassName("showimg")[0].innerHTML = null;  
        // 从相册中选择图片  
        mui.toast("从相册中选择一张图片");  
        plus.gallery.pick(function(path) {  
            showImg(path);  
        }, function(e) {  
            mui.toast("取消选择图片");  
        }, {  
            filter: "image",  
            multiple: false  
        });  
    }  

    function galleryImgs() {  
            //每次拍摄或选择图片前清空数组对象  
            f1.splice(0, f1.length);  
            document.getElementsByClassName("showimg")[0].innerHTML = null;  
            // 从相册中选择图片  
            mui.toast("从相册中选择不超过两张图片");  
            plus.gallery.pick(function(e) {  
                if (e.files.length != 2) {  
                    mui.toast('请选择身份证正面和背面照片共两张');  
                    return false;  
                }  
                for (var i in e.files) {  
                    showImg(e.files[i]);  
                }  
            }, function(e) {  
                mui.toast("取消选择图片");  
            }, {  
                filter: "image",  
                multiple: true  
            });  
        }  
        // 拍照添加文件  

    function cameraimages() {  
            //每次拍摄或选择图片前清空数组对象  
            f1.splice(0, f1.length);  
            document.getElementsByClassName("showimg")[0].innerHTML = null;  
            var cmr = plus.camera.getCamera();  
            cmr.captureImage(function(p) {  
                plus.io.resolveLocalFileSystemURL(p, function(entry) {  
                    var localurl = entry.toLocalURL(); //把拍照的目录路径，变成本地url路径，例如file:///........之类的。  
                    showImg(localurl);  
                });  
            }, function(e) {  
                mui.toast("很抱歉，获取失败 "   e);  
            });  
        }  
        // 全局数组对象，添加文件,用于压缩上传使用  
    var f1 = new Array();

    function imgupgrade() {  
            mui.toast('后台联调时启用上传功能');  
            return;  
            var wt = plus.nativeUI.showWaiting();  
            var url = '后台地址';  
            var dataType = 'json';  
            //发送数据    
            var data = {  
                files1: f1 //base64数据          
            };  
            mui.post(url, data, success, dataType);  
        }  
        //成功响应的回调函数  
    var success = function(response) {  
        plus.nativeUI.closeWaiting();  
        if (response != null) {  
            alert("上传成功");  
        }  
    }  
</script>

</html>



伟子的js代码我放在了附件中。

浮沉

不可以删除照片吗？

2016-04-28 15:01

小云菜 (作者)

回复小云菜：

canvasResize:
line 249 : var reader = window.plus ? new plus.io.FileReader() : new FileReader();
line 331: window.plus ? reader.readAsDataURL(file) : reader.readAsBinaryString(file);
做如上更改以兼容

2016-04-14 17:32

回复米米：

是的没做兼容

2016-04-14 17:22