<!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. C++的精髓——虚函数

    虚函数为了重载和多态的需要,在基类中是由定义的,即便定义是空,所以子类中可以重写也可以不写基类中的函数! 纯虚函数在基类中是没有定义的,必须在子类中加以实现,很像java中的接口函数! 虚函数 引入原 ...

  2. java基本输入类型数据System.out.println()或System.out.print()

  3. Node.js学习 - Function

    Node.js函数和JavaScript类似 function say(word) { console.log(word); } function execute(someFunction, valu ...

  4. 转: JMeter技巧集锦

    from:http://java.chinaitlab.com/tools/355421.html JMeter 是一个流行的用于负载测试的开源工具, 具有许多有用的功能元件,如线程组(thread ...

  5. seo步骤

    1. 关键词.找trends主词.去渣渣.(扩展).(去重tool sort) .打乱 :https://adwords.google.com/https://www.google.com/trend ...

  6. Kyoto Cabinet--nosql型单机数据库

    摘要: Kyoto Cabinet是轻量级nosql型本地内存数据库 简介 Kyoto Cabinet是一个数据库管理的 lib,是 Tokyo Cabinet 的改进版本.数据库是一个简单的包含记录 ...

  7. STL笔记之【map之总概】

    1.map和multimap内部数据结构: 红黑树(平衡二叉树的一种)2.在往map和multimap中插入元素时,会自动进行排序3.map和multimap的所有元素的key都被视为常数,其元素的实 ...

  8. sphinx multi valued filter

    publn_date is multi-valued <?php ini_set('memory_limit', '-1'); ini_set('max_execution_time', '10 ...

  9. json中文乱码问题

    首先在 tomcat的 D:\apache-tomcat-7.0.57\conf\server.xml里添加中文编码 <Connector port="8080" proto ...

  10. Ubuntu系统搭建PPTP,VPN

    1.先安装pptp apt-get install pptpd 2.打开pptp的DNS vim /etc/ppp/option.pptpd 去掉下面两行内容前的# ms-dns 8.8.8.8 ms ...