HTML5 实现手机拍照上传

_{2870次浏览}

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，然后另存为的方法