解決移動端上拍照圖片的方向和壓縮圖片

 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>