js使用base64 上传图片解决iOS手机竖屏拍摄图片发生旋转问题

iOS上拍摄/储存的图片会附带属性orientation（方向角）。这个属性会影响图片的显示方向。可以通过插件 exif.js 获取此属性。 使用插件 mobileBUGFix 调整方向角。

新建js upload.js

    $.fn.UploadImg = function(o) {
        this.change(function() {
            var file = this.files['0'];
            console.log(file);
            $('#error').html(file.type);
            if(file.size && file.size > o.mixsize) {
                o.error('大小超过限制');
                this.value = '';
            } else if(o.type && o.type.indexOf(file.type) < 0) {
                o.error('格式不正确');
                this.value = '';
            } else {
                var URL = URL || webkitURL;
                var blob = URL.createObjectURL(file);
                o.before(blob);
                _compress(blob, file);
                this.value = '';
            }
        });

        function _compress(blob, file) {
            var img = new Image();
            img.src = blob;
            img.onload = function() {
                var canvas = document.createElement('canvas');
                var ctx = canvas.getContext('2d');
                if(!o.width && !o.height && o.quality == 1) {
                    var w = this.width;
                    var h = this.height;
                } else {
                    var w = o.width || this.width;
                    var h = o.height || w / this.width * this.height;
                }
                $(canvas).attr({
                    width: w,
                    height: h
                });
                ctx.drawImage(this, 0, 0, w, h);
                var base64 = canvas.toDataURL(file.type, (o.quality || 0.8) * 1);
                if(navigator.userAgent.match(/iphone/i)) {
                    var myorientation = 0;
                    EXIF.getData(file, function() {
                        //图片方向角  
                        var Orientation = null;
                        // alert(EXIF.pretty(this));  
                        EXIF.getAllTags(this);
                        //alert(EXIF.getTag(this, 'Orientation')); 
                        myorientation = EXIF.getTag(this, 'Orientation');
                        //return;  

                        //                      alert(myorientation.toString());
                        var mpImg = new MegaPixImage(img);
                        mpImg.render(canvas, {
                            maxWidth: w,
                            maxHeight: h,
                            quality: o.quality || 0.8,
                            orientation: myorientation
                        });
                        base64 = canvas.toDataURL(file.type, o.quality || 0.8);
                        _ajaximg(base64, file.type);
                    });
                }

                // 修复android
                if(navigator.userAgent.match(/Android/i)) {
                    var encoder = new JPEGEncoder();
                    base64 = encoder.encode(ctx.getImageData(0, 0, w, h), o.quality * 100 || 80);
                    _ajaximg(base64, file.type);
                }

            };
        }

        function _ajaximg(base64, type, file) {
            $.post(o.url, {
                base64Img: base64
            }, function(res) {
                var res = eval('(' + res + ')');
                if(res.status == 1) {
                    o.error(res.msg);
                } else {
                    o.success(res.imgurl);
                }
                console.log(res);
            });

        }
    };

使用方法

        $('#thumbnail').UploadImg({
            url: url,
            width: '320',
            height: '320',
            quality: '0.8', //压缩率，默认值为0.8
            // 如果quality是1 宽和高都未设定 则上传原图
            mixsize: '10000000',
            //type : 'image/png,image/jpg,image/jpeg,image/pjpeg,image/gif,image/bmp,image/x-png',
            before: function(blob) {
                var imageMy = $('#my_face');
                imageMy.attr('src', blob);
            },
            error: function(res) {
                alert('error');
            },
            success: function(res) {
                alert('success');

            }
        });