H5上传照⽚调⽤相册拍照（附源码）效果图：
随便了两张图⽚⼤家别介意哈~~~
话不多所上源码：
<!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>
<!--
@entry
@require vue
@require jquery
@require ./style/index.less
@require ../style/index.less
@seajs.use ./js/index.js
@seajs.use ./js/img-upload.js
-->
</head>
<body>
<div id="speed"></div>
<section class="pic-content">
<div class="pic-group">
<img src="../../img/sfz-just.png">
<input type="file" accept="image/*" class="img-upload">
<p>上传⾝份证⼈像⾯</p>
</div>
<div class="pic-group">
<img src="../../img/sfz-back.png">
<input type="file" accept="image/*" class="img-upload">
<p>上传⾝份证国徽⾯</p>
</div>
<button class="but_boxr">⼈脸识别</button>
</section>
</body>
<script>
$(function(){
$(".img-upload").change(function () {
});
})
</script>
</html>
上⾯的引⼊⽅式是我公司⾃⼰封装的框架，⼤家可⽤正常的script引⼊js⽂件
img-upload.js
;(function(window){
var imgUpload = {};
/**
* from my.oschina/zyxchuxin/blog/700381
*/
console.log("loading start")
var _this = this;
if (input.files && input.files[0]) {
电影源代码 下载var reader = new FileReader();
var fileSize = und(input.files[0].size / 1024 / 1024) ; //以M为单位（把字节转换为M）
/
/input.files[0] 该信息包含：图⽚的⼤⼩，以byte计算获取size的⽅法如下：input.files[0].size;
//调⽤图⽚压缩⽅法：compress();
_thispress(sult,fileSize,input,orientation);
_thispress(sult,fileSize,input,orientation);
};
});
}
}
/**
* res代表上传的图⽚，fileSize⼤⼩图⽚的⼤⼩
* from juejin.im/post/5baf4a04e51d450ea52fd9a4#heading-0
*/
imgUploadpress = function(res,fileSize,obj,orientation) {
var _this = this;
var img = new Image(),
maxW = 640; //设置最⼤宽度
img.src = res;
var canvas = ateElement( 'canvas')
var ctx = Context( '2d');
/
/ 限制图⽚的宽度
if(img.width > maxW) {
img.height *= maxW / img.width;
img.width = maxW;
}
switch (orientation) {
case 3: // 旋转180°
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, -img.width, -img.height, img.width, img.height);                    break;
case 6: // 旋转90°
canvas.width = img.height;
canvas.height = img.width;
ctx.drawImage(img, 0, -img.height, img.width, img.height);
break;
case 8: // 旋转-90°
canvas.width = img.height;
canvas.height = img.width;
ctx.drawImage(img, -img.width, 0, img.width, img.height);
break;
default: //正常值
canvas.width = img.width;
canvas.height = img.height;
ctx.drawImage(img, 0, 0, img.width, img.height);
}
var compressRate = _CompressRate(1,fileSize);
var dataUrl = DataURL( 'image/png', compressRate);
// 优化图⽚铺满容器
if(img.height / img.width < 0.5){
obj.previousElementSibling.style.width = '100%';
}else{
obj.previousElementSibling.style.width = '2.6rem';
}
// 解决第⼆次选择相同⽂件不触发change事件
obj.value = null;
obj.previousElementSibling.setAttribute('src',dataUrl);
console.log("dataUrl",dataUrl)
}
}
}
/**
* 计算压缩⽐率，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;
}
return compressRate;
}
/**
* from stackoverflow/a/32490603
* from github/majiang666/ImageFile/blob/master/src/index.js
* 获取照⽚⽅向，主要是为了解决IOS和部分三星⼿机会出现此bug，照⽚⽅向的问题    */
var reader = new FileReader();
var view = new DataView(sult);
if (Uint16(0, false) != 0xFFD8)
{
return callback(-2);
}
var length = view.byteLength, offset = 2;
while (offset < length)
{
if (Uint16(offset+2, false) <= 8) return callback(-1);
var marker = Uint16(offset, false);
offset += 2;
if (marker == 0xFFE1)
{
if (Uint32(offset += 2, false) != 0x45786966)
{
return callback(-1);
}
var little = Uint16(offset += 6, false) == 0x4949;
offset += Uint32(offset + 4, little);
var tags = Uint16(offset, little);
offset += 2;
for (var i = 0; i < tags; i++)
{
if (Uint16(offset + (i * 12), little) == 0x0112)
{
return Uint16(offset + (i * 12) + 8, little));
}
}
}
else if ((marker & 0xFF00) != 0xFF00)
{
break;
}
else
{
offset += Uint16(offset, false);
offset += Uint16(offset, false);                }
}
return callback(-1);
};
}
window.imgUpload = imgUpload;
})(window);
ps：还需要引⼊jquery哦！！
**遇android和ios的兼容坑请移步——

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。