小云菜
小云菜
  • 发布:2015-04-26 23:07
  • 更新:2021-02-09 09:54
  • 阅读:68252

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

分类:MUI

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

代码整合了
1.多串君

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

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

  1. 新增了最大宽度(高度)的判别,按比例压缩。
    具体代码如下:

    
    <!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 showImg(url) {
// 兼容以“file:”开头的情况
if (0 != url.toString().indexOf("file://")) {
url = "file://" + url;
}
var div = document.getElementsByClassName("showimg")[0];
var img = new Image();
img.src = url; // 传过来的图片路径在这里用。
img.onclick = function() {
plus.runtime.openFile(url);
};
img.onload = function() {
var tmph = img.height;
var tmpw = img.width;
var isHengTu = tmpw > tmph;
var max = Math.max(tmpw, tmph);
var min = Math.min(tmpw, tmph);
var bili = min / max;
if (max > 1200) {
max = 1200;
min = Math.floor(bili * max);
}
tmph = isHengTu ? min : max;
tmpw = isHengTu ? max : min;
img.style.border = "1px solid rgb(200,199,204)";
img.style.margin = "10px";
img.style.width = "150px";
img.style.height = "150px";
img.onload = null;
plus.io.resolveLocalFileSystemURL(url, function(entry) {
entry.file(function(file) {
console.log(file.size + '--' + file.name);
canvasResize(file, {
width: tmpw,
height: tmph,
crop: false,
quality: 50, //压缩质量
rotate: 0,
callback: function(data, width, height) {
f1.push(data);
img.src = data;
div.appendChild(img);
plus.nativeUI.closeWaiting();
}
});
});
},
function(e) {
plus.nativeUI.closeWaiting();
console.log(e.message);
});
};
};

    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>  



伟子的js代码我放在了附件中。
40 关注 分享
尘岳two 蔡繁荣 杨羊羊 DCloud_heavensoft Jenson jwenlee Mr丶Leo 踩着单车载着猪 Riven ztingjian 大鱼泡泡 青岛哲少 如啼眼 damdmen 你好卟 Jang barice 719540388 豆花饭 ai666 496192029@qq.com 206759614@qq.com Android_XR Trust mr_fanbin@outlook.com 赵 前端菜鸟哟 ias06111 tank-88@qq.com 1521610560@qq.com 五九 576098815@qq.com MR不靠谱 306626546@qq.com 18768156@qq.com 1399370112@qq.com chenjian54332@163.com skysowe 2083363836@qq.com 1123297263@qq.com

要回复文章请先登录注册

1695052462@qq.com

1695052462@qq.com

我也是踩了不少坑
2021-02-09 09:54
1695052462@qq.com

1695052462@qq.com

我的个人项目已经上线了,我使用的是七牛云存储(阿里也不错的),大概原理也一样吧,你们可以看看上传图片

1、Android的(软著没申请下来,暂时上不了架):http://d.firim.top/tc7b?utm_source=fir&utm_medium=qrhttp://d.firim.top/tc7b?utm_source=fir&utm_medium=qr

2、iOS已经上架搜索:猫云—优质贴心的宠物平台

3、顺便也给你们给链接吧,例如iOS做唤起第三方或某个APP时可以使用到 https://apps.apple.com/cn/app/猫云-优质贴心的宠物社交平台/id1474103355
2021-02-09 09:54
503237256@qq.com

503237256@qq.com

mark
2019-10-08 10:16
后会无期GEM

后会无期GEM

回复 1542348489@qq.com :
解决了吗,哥哥
2019-07-09 14:56
849019060@qq.com

849019060@qq.com

mark
2019-02-25 09:49
chenjian54332@163.com

chenjian54332@163.com

感谢分享,非常好用
2018-10-19 17:22
biubiu灬

biubiu灬

PHP端怎么接收,求教下
2018-07-01 21:03
1542348489@qq.com

1542348489@qq.com

为什么传参到后台一直是null
2018-06-13 11:44
掌上惠水

掌上惠水

哥,PHP不会写、、、、、、、、上面能弄了,就是上次那部分,能给源码看看么、、、
2018-05-07 02:20
专注写bug

专注写bug

回复 501947931@qq.com :
改成plus.io.FileReader(file, { 我刚试了的
2018-03-14 12:11