HTML5实习手机端浏览器拍照和本地上传

开题

上两张效果图，满足一下眼界~~效果是在同局域网下手机上模拟，该程序暂不支持PC端读取摄像头！

 

 前端代码

                <div class="idnojust">
					<div class="just">证件照正面<span class="show" style="color:red;vertical-align:middle;padding-top:5px;">*</span></div>
					<img  src="<%=basePath%>share/img/idnoversa.png" height="300">
					<input type="file"  accept="image/*"    class="img-idnoversa-upload file-input">
					<input type="hidden"  name="front" />
					<p id="frontthumbText"></p>
				</div>
				<div class="idnojust">
					<div class="just">证件照反面<span class="show" style="color:red;vertical-align:middle;padding-top:5px;">*</span></div>
					<img src="<%=basePath%>share/img/idnojuast.png" height="300">
					<input type="file"  accept="image/*"   class="img-idnojuast-upload file-input">
					<input type="hidden"  name="back" />
					<p id="backthumbText"></p>
				</div>
				<div class="idnojust">
					<div class="just">手持证件照<span class="show" style="color:red;vertical-align:middle;padding-top:5px;">*</span></div>
					<img src="<%=basePath%>share/img/idnohand.png" height="300">
					<input type="file"  accept="image/*"   class="img-idnohand-upload file-input">
					<input type="hidden"  name="hand" />
					<p id="handthumbText"></p>
				</div>
                <div class="idnorule">
                    <p>手持照必须：</p>
                    <p>1、面部清晰可见，无遮挡，无妆容</p>
                    <p>2、完整露出双手双臂</p>
                    <p>3、证件照片及证件号清晰可见</p>
                </div>

 证件默认图：

样式：

把input框设置无色，切在覆盖图片上方，这样点击默认图实现触发上传

<style>


.file-input{
        position: absolute;
	    opacity: 0;
	    /* margin-top: -0.8rem; */
	    width: 90%;
	    height: 7.12rem;
}

</style>

核心JS代码：

单独引入html中

<script src="<%=basePath%>share/js/img-upload.js"></script>

;(function(window){
    var imgUpload = {};

    /**
     * from https://my.oschina.net/zyxchuxin/blog/700381
     */
    imgUpload.readURL = function (input) {
        console.log("loading start")
        var _this = this;
        if (input.files && input.files[0]) {
            this.getOrientation(input.files[0], function(orientation) {
                var reader = new FileReader();
                var fileSize = Math.round(input.files[0].size / 1024 / 1024) ; //以M为单位（把字节转换为M）
                //input.files[0] 该信息包含：图片的大小，以byte计算 获取size的方法如下：input.files[0].size;
                reader.onload = function (e) {
                    //调用图片压缩方法：compress();
                    _this.compress(e.target.result,fileSize,input,orientation);
                };
                reader.readAsDataURL(input.files[0]);
            });
        }
    }

    /**
     * res代表上传的图片，fileSize大小图片的大小
     * from https://juejin.im/post/5baf4a04e51d450ea52fd9a4#heading-0
     */
    imgUpload.compress = function(res,fileSize,obj,orientation) { 
        var _this = this;
        var img = new Image(),
            maxW = 640; //设置最大宽度
        img.src = res;
        img.onload = function () {
            var canvas = document.createElement( 'canvas')
            var ctx = canvas.getContext( '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.rotate((180 * Math.PI) / 180);
                    ctx.drawImage(img, -img.width, -img.height, img.width, img.height);
                    break;
                case 6: // 旋转90°
                    canvas.width = img.height;
                    canvas.height = img.width;
                    ctx.rotate((90 * Math.PI) / 180);
                    ctx.drawImage(img, 0, -img.height, img.width, img.height);
                    break;
                case 8: // 旋转-90°
                    canvas.width = img.height;
                    canvas.height = img.width;
                    ctx.rotate((-90 * Math.PI) / 180);
                    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 = _this.getCompressRate(1,fileSize);
            var dataUrl = canvas.toDataURL( 'image/png', compressRate);

            // 优化图片铺满容器
            if(img.height / img.width < 0.5){
                obj.previousElementSibling.style.width = '90%';
            }else{
                obj.previousElementSibling.style.width = '90%';
            }
            // 解决第二次选择相同文件不触发change事件
            obj.value = null;

            obj.previousElementSibling.setAttribute('src',dataUrl);
            console.log("dataUrl",dataUrl)
            
            dataURLtoFile(dataUrl,obj)
            
        }
    }

    
    
    /**
     * 计算压缩比率，size单位为MB
     */
    imgUpload.getCompressRate = function (allowMaxSize,fileSize){ 
          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 http://stackoverflow.com/a/32490603
     * from https://github.com/majiang666/ImageFile/blob/master/src/index.js
     * 获取照片方向，主要是为了解决IOS和部分三星手机会出现此bug，照片方向的问题
     */ 
    imgUpload.getOrientation = function getOrientation(file, callback) {
        var reader = new FileReader();
        reader.onload = function(e) {
            var view = new DataView(e.target.result);
            if (view.getUint16(0, false) != 0xFFD8)
            {
                return callback(-2);
            }
            var length = view.byteLength, offset = 2;
            while (offset < length) 
            {
                if (view.getUint16(offset+2, false) <= 8) return callback(-1);
                var marker = view.getUint16(offset, false);
                offset += 2;
                if (marker == 0xFFE1) 
                {
                    if (view.getUint32(offset += 2, false) != 0x45786966) 
                    {
                        return callback(-1);
                    }
                    var little = view.getUint16(offset += 6, false) == 0x4949;
                    offset += view.getUint32(offset + 4, little);
                    var tags = view.getUint16(offset, little);
                    offset += 2;
                    for (var i = 0; i < tags; i++)
                    {
                        if (view.getUint16(offset + (i * 12), little) == 0x0112)
                        {
                            return callback(view.getUint16(offset + (i * 12) + 8, little));
                        }
                    }
                }
                else if ((marker & 0xFF00) != 0xFF00)
                {
                    break;
                }
                else
                { 
                    offset += view.getUint16(offset, false);
                }
            }
            return callback(-1);
        };
        reader.readAsArrayBuffer(file);
    }

    window.imgUpload = imgUpload;

})(window);

JS逻辑代码：

$(function(){
	//拍照正面上传
    $(".img-idnoversa-upload").change(function () {
       var img =  imgUpload.readURL(this);
    });
	//拍照反面上传
    $(".img-idnojuast-upload").change(function () {
        imgUpload.readURL(this);
    });
	//拍照手持上传
    $(".img-idnohand-upload").change(function () {
        imgUpload.readURL(this);
    });
});

	//将base64转换为文件对象
	function dataURLtoFile(dataurl, address) {
		  var arr = dataurl.split(',');
		  var mime = arr[0].match(/:(.*?);/)[1];
		  var bstr = atob(arr[1]);
		  var n = bstr.length; 
		  var u8arr = new Uint8Array(n);
		  while(n--){
		      u8arr[n] = bstr.charCodeAt(n);
		  }
		  //转换成file对象
		 var file = new File([u8arr], '2021.png', {type:mime});
		  //转换成成blob对象
		  //return new Blob([u8arr],{type:mime});
		  
		  var formdata=new FormData();
	        formdata.append('Filedata',file);
	        formdata.append('fileType','images');
	        $.ajax({
	            url:'<%=basePath%>file/uploadPic',
	            type:'post',
	            contentType:false,
	            data:formdata,
	            processData:false,
	            success:function(info){    
	                console.log(info)
	                address.previousElementSibling.setAttribute('src',info.path);
	                address.nextElementSibling.setAttribute('value',info.path);
	            },
	            error:function(err){
	                console.log(err)
	            }
	        });
	        
	     
	        
	}

执行效果：