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


    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中是获取不到文件对象的。

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

    <!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>  
    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 = ur    l; // 传过来的图片    路径在这里用。
        img.onclick = function () {
            plus.runtime.openFile(url);
        };
        img.onload = functi        on() {
            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, {
                         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);
                });
        };
    }; 

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

  • 相关阅读:
    《团队-团队编程项目中国象棋-成员简介及分工》
    团队-编程项目 中国象棋-需求分析
    结对编程:贪吃蛇项目
    软件工程进阶
    JAVA第二次作业
    JAVA第一次作业
    JS解决重复绑定问题以及获取事件
    ECMAScript5学习笔记--第十四章 程序
    ECMAScript5学习笔记--第十三章 函数定义
    ECMAScript5学习笔记--第十二章 语句
  • 原文地址:https://www.cnblogs.com/xiaoshen666/p/10917027.html
Copyright © 2020-2023  润新知