html5 选择照片上传、拍照上传及ios照片旋转90deg解决方案

选择相册上传及拍照上传

html

 <input type="file" id="imgUpload" accept="image/*" capture="">

 //本地上传
    $('.selectLoad').click(function(){
        stateAPP=0;;
        $('#imgUpload').attr('accept','image/*');
        $('#imgUpload').removeAttr('capture')  //移除属性
        setTimeout(()=>{
             $('#imgUpload').click();
        },100)
    })
  
    //拍照上传
    $('.pzUpload').click(function(){
        $('#imgUpload').attr('accept','image/*');
        $('#imgUpload').attr('capture','camera')//添加属性
        stateAPP=1;
        setTimeout(()=>{
           $('#imgUpload').click();
        },100)
    })

ios拍照照片默认旋转了90度矫正

此处需借助exif.js 插件判断照片是否旋转了
下载地址 https://github.com/exif-js/exif-js
http://code.ciaoca.com/javascript/exif-js/

$('#imgUpload').on('change',function(el){//监听图片上传
        let file = el.target;
        if(!file.files[0]) return;
        var render = new FileReader();
        render.onload=function(e){
            let res = e.target.result;
            if(stateAPP){
                EXIF.getData(file.files[0], function() {  //判断照片是否旋转
                    EXIF.getAllTags(this);
                    Orientation = EXIF.getTag(this, 'Orientation');  
                  /*
                      Orientation =1  -- 正常
                      Orientation =6  --顺时针旋转90deg  （ios正常竖屏拍照时）
                      其他的值处理方式类似，都是根据旋转的角度，对canvas进行校正
                */
                    compress(res,e.total/(1024*1000))//对照片进行压缩
                })
                return;
            }
            $('.mode').hide();
            if(file.files[0].size>1024*1000){
                $('#imgUpload').value=''
                msgFun('图片不能超过1M');
                return;
            }
            $('.see').hide();
            $('#imgSel').show().attr('src',e.target.result);
            window.base64= e.target.result;
            $('.uploadImg').attr('src',window.base64)
        }
        let img64 = render.readAsDataURL(file.files[0]);
    })

 function compress(res,fileSize) { //res代表上传的图片，fileSize大小图片的大小
            var img = new Image(),
                maxW = 320; //设置最大宽度
                img.src=res;
            img.onload = function () {
                var canvas = document.createElement( 'canvas'),
                    ctx = canvas.getContext( '2d');
                if(img.width > maxW) {
                    img.height *= maxW / img.width;
                    img.width = maxW;
                }
                canvas.width = img.width;
                canvas.height = img.height;
                ctx.clearRect(0, 0, canvas.width, canvas.height);
                ctx.drawImage(img, 0, 0, img.width, img.height);
                let dataUrl=null;
                if(Orientation===6){
                    canvas.width = canvas.width * (img.height / img.width);
                    canvas.height =canvas.width+40;
                    ctx.translate(canvas.width / 2, canvas.height / 2);
                    ctx.rotate(90 * Math.PI / 180); 
                    ctx.drawImage(img, -(canvas.height / 2), -(canvas.width / 2), canvas.height, canvas.width);
                }
                var compressRate = getCompressRate(0.8,fileSize);
                    dataUrl = canvas.toDataURL( 'image/jpg', compressRate);
                $('.mode').hide();
                $('.see').hide();
                $('#imgSel').show().attr('src',dataUrl);
                window.base64= dataUrl;
                $('.uploadImg').attr('src',window.base64)
            }
        }
 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;
            }
            return compressRate;
        }

 function showSize(base64url) {//测试base64位大小
                //获取base64图片大小，返回MB数字
            var str = base64url.replace('data:image/jpg;base64,', '');
            var equalIndex = str.indexOf('=');
            if(str.indexOf('=')>0) {
                str=str.substring(0, equalIndex);
            }
            var strLength=str.length;
            console.log(strLength)
            var fileLength=parseInt(strLength-(strLength/8)*2);
            // 由字节转换为MB
            var size = "";
            size = (fileLength/(1024 * 1024)).toFixed(2);
            var sizeStr = size + "";                        //转成字符串
            var index = sizeStr.indexOf(".");                    //获取小数点处的索引
            var dou = sizeStr.substr(index + 1 ,2)            //获取小数点后两位的值
            if(dou == "00"){                                //判断后两位是否为00，如果是则删除00                
                return sizeStr.substring(0, index) + sizeStr.substr(index + 3, 2)
            }
            return Number(size);
        }