zoukankan html css js c++ java

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

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

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

代码整合了
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,可以选择一张或多张图片也可以拍摄照片

查看全文

相关阅读:
485串口接线
 mvc3 升级mvc5
VB连接ACCESS数据库，使用 LIKE 通配符问题
 VB6 读写西门子PLC
可用的 .net core 支持 RSA 私钥加密工具类
 解决 Win7 远程桌面已停止工作的问题
 解决 WinForm 重写 CreateParams 隐藏窗口以后的显示问题
 解决安装 .net framework 发生 extracting files error 问题
 CentOS7 安装配置笔记
 通过特殊处理 Resize 事件解决 WinForm 加载时闪烁问题的一个方法

原文地址：https://www.cnblogs.com/xiaoshen666/p/10917027.html