解决移动端上拍照图片的方向和压缩图片

 html代码：

<input type="file" id="UploadPhoto" name="UploadPhoto" accept="image/*" style="display:none;" />

js设置input type="file"只能在移动端上拍照，不能从相册中选取，代码如下： 

$('#UploadPhoto').attr('capture', 'camera');

 

js代码：需引用exif.js文件才能解决拍照时图片旋转问题 ，下载地址：https://download.csdn.net/download/qq_35481871/12190006

    /*一个JavaScript库，用于从图像文件读取EXIF元数据。*/
    /*解决ios拍照出现旋转的问题*/
    <script src="~/Content/exif/exif.js" type="text/javascript"></script>
    <script type="text/javascript">  
         $(function () {
            $('#UploadPhoto').change(function (e) {
                var file = this.files[0];
                if (!file.type.match(/image.*/)) {
                    var msg = "请上传图片！";
                    alert(msg);
                    return false;
                }
                //图片方向角
                var Orientation = null;
                //获取照片方向角属性，用户旋转控制  
                EXIF.getData(file, function () {
                    EXIF.getAllTags(this);
                    Orientation = EXIF.getTag(this, 'Orientation');
                });
                //创建一个文件读取的工具类
                var reader = new FileReader();
                //这里利用了闭包的特性，来保留文件名
                (function (x) {
                    reader.onload = function (e) {
                        CompressPhoto(this.result, {
                            quality: 0.2,
                            size: file.size,
                            or: Orientation
                        }, function (base64) {
                            UploadPhoto(base64);
                        });

                    }
                })(file.name);
                //告诉文件读取工具类读取那个文件
                reader.readAsDataURL(file);
            });
        });
        //压缩图片
        function CompressPhoto(path, obj, callback) {
            var img = new Image();
            img.src = path;
            img.onload = function () {
                var w = this.width,
                    h = this.height,
                    scale = w / h;
                //判断当前上传相片是否大于1M，大于按比例压缩
                if (obj.size / 1024 > 1024) {
                    w = obj.width || w;
                    h = obj.height || (w / scale);
                }
                var quality = 0.7;  // 默认图片质量为0.7
                //生成canvas
                var canvas = document.createElement('canvas');
                var ctx = canvas.getContext('2d');
                // 创建属性节点
                var anw = document.createAttribute("width");
                anw.nodeValue = w;
                var anh = document.createAttribute("height");
                anh.nodeValue = h;
                canvas.setAttributeNode(anw);
                canvas.setAttributeNode(anh);
                ctx.drawImage(this, 0, 0, w, h);

                //旋转图片处理
                switch (obj.or) {
                    case 6: // 顺时针旋转90度
                        RotateImg(this, 'right', canvas, 1);
                        break;
                    case 8: // 逆时针旋转90度
                        RotateImg(this, 'left', canvas, 1);
                        break;
                    case 3: // 顺时针旋转180度
                        RotateImg(this, 'right', canvas, 2);
                        break;
                    default:
                        break;
                }

                // 图像质量
                if (obj.quality && obj.quality <= 1 && obj.quality > 0) {
                    quality = obj.quality;
                }
                var base64 = "";
                if (obj.size / 1024 > 1024) {
                    // quality值越小，所绘制出的图像越模糊
                    base64 = canvas.toDataURL('image/jpeg', quality);
                }
                else {
                    base64 = canvas.toDataURL('image/jpeg');
                }

                // 回调函数返回base64的值
                callback(base64);
            }
        }
        //对图片旋转处理   
        function RotateImg(img, dir, canvas, s) {
            //最小与最大旋转方向，图片旋转4次后回到原方向   
            var min_step = 0;
            var max_step = 3;
            if (img == null) return;
            var width = canvas.width || img.width;
            var height = canvas.height || img.height;
            var step = 0;
            if (dir == 'right') {
                step += s;
                //旋转到原位置，即超过最大值    
                step > max_step && (step = min_step);
            } else {
                step -= s;
                step < min_step && (step = max_step);
            }
            var degree = step * 90 * Math.PI / 180;
            var ctx = canvas.getContext('2d');
            switch (step) {
                case 1:
                    canvas.width = height;
                    canvas.height = width;
                    ctx.rotate(degree);
                    ctx.drawImage(img, 0, -height, width, height);
                    break;
                case 2:
                    canvas.width = width;
                    canvas.height = height;
                    ctx.rotate(degree);
                    ctx.drawImage(img, -width, -height, width, height);
                    break;
                case 3:
                    canvas.width = height;
                    canvas.height = width;
                    ctx.rotate(degree);
                    ctx.drawImage(img, -width, 0, width, height);
                    break;
                default:
                    canvas.width = width;
                    canvas.height = height;
                    ctx.rotate(degree);
                    ctx.drawImage(img, 0, 0, width, height);
                    break;
            }
        }
        function UploadPhoto(base64) {
            $('#Base64Code').val(base64);
            $('#frmGotoDriver').attr('action', '@Url.Action("DriverForm","Photo")').submit();         
        }
    </script>