台州温岭做网站请找我们 (专业建站 | 诚信服务) 13958630945 在线客服 联系技术

佳源设计|台州网站建设|佳源网页设计

网站当前位置: 首页>>做网站步骤>>HTML5 实现手机拍照上传
建站流程
 
建站知识
 
网站建站疑难
 
网站设计_图象处理
 
网站设计_Css样式
 
网站建设_Flash疑难
 
手机网站建设
 
 建站知识搜索
 

台州网站建设
 
网站优化
 
提交疑问
 做网站步骤 > HTML5 实现手机拍照上传

HTML5 实现手机拍照上传

1858次浏览
2016-08-25
文章转载地址:http://zhangyixia.com/image-upload/



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name = "viewport" content= "width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
    <meta name = "apple-mobile-web-app-capable" content= "yes" />
    <meta name = "apple-mobile-web-app-status-bar-style" content= "black" />
    <meta name = "format-detection" content= "telephone=no" >
    <title>HTML5 调用手机拍照并压缩上传</title>
    <style>
    *{
        padding:0;
        margin:0;
    }
    h1{
        height:42px;
        line-height: 42px;
        background:#3548cc;
        color: #fff;
        font-size: 21px;
        font-weight: 400;
        text-align: center;
    }
    div.wrapper{
        position: relative;
        height: 200px;
        overflow: hidden;
    }
    .user-avatar{
        margin-top:20px;
        font-size: 16px;
        color:#3548cc;
        margin-left: 20px;
        display: inline-block;
    }
    .input-upload-image,.upload-btn{
        width: 100px;
        height: 100px;
        display: block;
        position: absolute;
        top:20px;
        left: 120px;
    }
    .input-upload-image{
        z-index: 1;
        border:none;
        -webkit-opacity:0;
        opacity: 0;
    }
    .upload-btn{
        z-index: 2;
    }
    .events-pointer-none{
        pointer-events: none;
        cursor: pointer;
    }
    .show-result{
        padding: 20px;
        font-size: 14px;
        line-height: 24px;
        color: #3548cc;
    }
    .show-result .small{
        font-size: 12px;
        color:green;
    }
    .overlay{
        background: rgba(0, 0, 0, 0.5);
        height: 100%;
        width: 100%;
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99999;
        justify-content: center;
        align-items:center;
        border: 0;
        display:none;
    }
    .overlay img {
        width: 31px;
        height: 31px;
    }
    </style>
</head>
<body>
    <h1>上传头像</h1>
    <div class = "wrapper">
        <span class="user-avatar">用户头像:</span>
        <input type = "file" accept="image/*" capture="camera" id="img" class="input-upload-image"/>
        <img class="upload-btn events-pointer-none" src="img_upload.png" id="imgInfo"/>
    </div>
    <div id="showResult" class="show-result">
    </div>
    <div class="overlay" id="overlay">
        <img src="loading.gif" alt="加载中...">
    </div>


    <script>
    'use strict';


    var result1 = '',result2 = '',result3 = '',result4 = '' ,result5 = '',result6 = '' ;


    $('img').addEventListener('change', function () {
        $('overlay').style.display = 'flex';


        var reader = new FileReader();


        reader.onload = function (e) {
            var compressImg = compress( this.result,fileSize);
        };


        reader.readAsDataURL(this.files[0]);


        result1 = this.files[0].size + ' Bytes';


        var fileSize = Math.round(this.files[0].size/1024/1024) ;
    }, false);


    var compress = function (res,fileSize) {
        var img = new Image(),
            maxW = 200; //设置最大宽度


        img.onload = function () {
            var cvs = document.createElement( 'canvas'),
                ctx = cvs.getContext( '2d');


            result2 = img.width;
            result3 = img.height;


            if(img.width > maxW) {
                img.height *= maxW / img.width;
                img.width = maxW;
            }


            cvs.width = img.width;
            cvs.height = img.height;


            result4 = cvs.width;
            result5 = cvs.height;


            ctx.clearRect(0, 0, cvs.width, cvs.height);
            ctx.drawImage(img, 0, 0, img.width, img.height);


            var compressRate = getCompressRate(1,fileSize);


            var dataUrl = cvs.toDataURL( 'image/jpeg', compressRate);


            $('imgInfo').setAttribute('src',dataUrl);


             $('overlay').style.display = 'none';


            $('showResult').innerHTML = "<p>压缩前图片大小为:"+result1+"<br/><p>压缩前图片宽度为:"+result2+"<br/><p>压缩前图片高度为:"+result3+"<br/><p>压缩后图片宽度为:"+result4+"<br/><p>压缩后图片高度为:"+result5+"</p><p class='small'>压缩后的图片大小,可通过nodejs或者后台获取!</p>" ;
        };


        img.src = res;
    };


    function getCompressRate(allowMaxSize,fileSize){ //计算压缩比率,size单位为MB
        var compressRate = 1;


        if(fileSize/allowMaxSize > 4){
           compressRate = 0.5;
        } else if(fileSize/allowMaxSize >3){
           compressRate = 0.6;
        } else if(fileSize/allowMaxSize >2){
           compressRate = 0.7;
        } else if(fileSize > allowMaxSize){
           compressRate = 0.8;
        } else{
           compressRate = 0.9;
        }


        result6 = compressRate;


        return compressRate;
    }


    function $(id){
        if(typeof id === 'string' && id.constructor === String){
            return document.getElementById(id);
        }else{
            return;
        }
    }
    </script>
</body>
</html>

页面所在本站地址: http://www.52-life.net/Nshow_reurl.asp?reurl=Html5_paizhao
上一篇 >>HTML5 获取用户经纬度及距离计算公式
下一篇 >>PHP生成Excel,然后另存为的方法