<!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://my.oschina.net/zyxchuxin/blog/700381

手机端 H5上传头像的更多相关文章

  1. 使用localResizeIMG3+WebAPI实现手机端图片上传

    前言 惯例~惯例~昨天发表的使用OWIN作为WebAPI的宿主..嗯..有很多人问..是不是缺少了什么 - - 好吧,如果你要把OWIN寄宿在其他的地方...代码如下: namespace Conso ...

  2. HTML5手机端拍照上传

    1.accept="image/*" capture="camera" 自动调用手机端拍照功能 accept="image/*" captu ...

  3. 手机端图像编辑上传-cropper

    编辑头像,实现相册,照像功能,并能缩放裁剪功能,可自定义UI,引用'cropper.js', 'exif.js' /*初始化裁剪插件*/ var screenWidth = $(window).wid ...

  4. django 常用方法总结 < 手写分页-上传头像-redis缓存，排行 ...>

    1.不使用自带模块<Paginator>的手写分页功能views.pydef post_list(request): page = request.GET.get('page', 1) # ...

  5. php实现手机拍照上传头像功能

    现在手机拍照很火,那么如何使用手机拍照并上传头像呢?原因很简单,就是数据传递,首先手机传递照片信息,这个就不是post传递 也不是get函数传递, 这个另外一种数据格式传递,使用的是$GLOBALS ...

  6. WebAPI实现移动端上传头像接口

    测试时可以直接使用PostMan模拟发送请求 /// <summary> /// 手机端上传头像接口 /// </summary> /// <param name=&qu ...

  7. php实现视频拍照上传头像功能实例代码

    如果要在php中实现视频拍照我们需要借助于flash插件了,由flash拍出的确照片我们再通过php的$GLOBALS ['HTTP_RAW_POST_DATA']接受数据,然后保存成图片就可以了,下 ...

  8. vue+node开发手机端h5页面开发遇到的坑

    项目进行中...随时更新 这里记录了一些手机端调试的方式 一 css 1.文字超过span宽度显示...(单行文字) .topWrap .introduce span { padding: 0 17p ...

  9. 移动手机端H5无缝间歇平滑向上滚动js代码

    在没结合css3的transform实现平滑过渡前,我都是用的jquery的animate方法,此方法在PC端基本看不出来有稍微卡顿的现象,但是在性能不高的手机上使用该方法,就会有明显的卡顿现象,不够 ...

随机推荐

  1. OpenGL———混合的基本知识

    混合是一种常用的技巧,通常可以用来实现半透明.但其实它也是十分灵活的,你可以通过不同的设置得到不同的混合结果,产生一些有趣或者奇怪的图象.混合是什么呢?混合就是把两种颜色混在一起.具体一点,就是把某一 ...

  2. Jquery 控制元素 上 下 移动

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  3. JS定时器的使用--无缝滚动

    <title>无标题文档</title> <style> * {margin:0; padding:0;} #div1{width:1172px; height:2 ...

  4. js框架——angular.js(4)

    1. angular中的对象 其实也不用多说的,前台是可以提取后台定义的对象的—— <body ng-app="MyApp"> <div ng-controlle ...

  5. 转：LoadRunner获取毫秒及字符串替换实现

    今天做一个性能测试,参数化要求创建用户名不可以重复,想来想不没有什么好的办法来避免用户名字的重复.所以就想用时间+随机数来实现,但是实现中遇到一个问题. 名字中不可以包含.这个特殊的字符的.所以要处理 ...

  6. P2P应用中的NAT穿透问题

    多年前曾经写过一个关于NAT钻洞的实验.现在发现那个做法在我现在的路由器上已经不管用了.经过一番搜索发现时过境迁,世界变化很快,新路由器已经是UPnP了.在这里重新理一下几种方法. 第一种,也是不太靠 ...

  7. git第三篇---建立一个project

    Git global setup: git config --global user.name "xx" git config --global user.email " ...

  8. 高性能web开发：如何加载js，，js的存放位置

    外部JS的阻塞下载 所有浏览器在下载JS的时候,会阻止一切其他活动,比如其他资源的下载,内容的呈现等等.至到JS下载.解析.执行完毕后才开始继续并行下载其他资源并呈现内容. 有人会问:为什么JS不能像 ...

  9. emacs search, 讲的很清楚。

    默认情况下,Emacs采用了一种很待殊的”增量搜索”的功能,虽然它与我们常用的搜索方法在操作习惯上有很大的不同,但习惯后确实是十分的方便. 要让Emacs开始执行搜索,可以按C-s或C-r,前者是从光 ...

  10. java集合框架工具类Collections,集合的操作

    1 import java.util.*; public class asList { public static void main(String args[]) { // int arr[] = ...