前端input图片的上传和压缩以及图片旋转90度问题解决

  最近的微信项目中用到了input标签来上传图片文件，遇到两个大问题：

1、图片太大，导致上传速度慢，影响体验，需要压缩后上传；

2、有些手机拍照是横屏的，在页面展示的时候和正常方向相差90度，也就是本该立着的照片躺下了，需要根据具体情况修正后上传；

手机上的效果是这样的：

上传后确是这样的：

而我想要的是正确朝上的图片，查了资料后发现这是一些手机横着拍照导致的：

其实是拿手机拍照的方向问题，iphone正确的手机拍照方式是横屏的，用户往往是竖屏拍照等于照相机反转了９０度，出来的照片当然是反转９０度，当你横屏拍照上传，图片就是正确的，一张生成的图片是无法辨别选择方向的，只有在上传前反转角度才行，　因为上传到服务器以后，程序怎么可能知道这张照片要反转９０度，那张要反转１８０度，另一张要反转２７０度呢，其他的不用反转呢，正确的拍照姿势很重要呀，哈哈。。。蛋疼的问题

3、微信活动分享的时候只允许分享一张图片，而活动参与者上传的是两张对比照，所以需要在前端进行图片拼接后上传

  上传的图片信息装入formData里面传给后台保存：

于是就有了下面的代码：

<!--我要参赛-->
<div class="takeIn swiper-no-swiping" style="display: none;">
    <div class="takeIn-inner">
        <div class="pic-top">
            <img src="./images/myPics-top.png" alt="">
        </div>
        <div class="content-uploading">
            <div class="uploading">
                <div class="born-wrapper">
                    <input type="file" name="born" class="bornInp" id="bornInp">
                </div>
                <div class="vs-wrapper">
                    <img class="vs" src="./images/slide-1-vs.png" alt="">
                </div>
                <div class="beauty-wrapper">
                    <input type="file" name="beauty" class="beautyInp" id="beautyInp">
                </div>
            </div>
                    <textarea name="message" class="message" id="mes" cols="30" rows="2" maxlength="50"
                              placeholder="娃刚出生时，老公一度以为我是整容的，随着娃长大，我终于洗白了。"></textarea>
            <label class="check">
                <span id="check" class=""></span>
                <strong class="readyRead">本人承诺所上传图片符合法律法规，
                    并且拥有所有权或经所有人授权，因此造成的法律责任有本人承担</strong>
            </label>
            <button class="submit" id="submit" type="button">
                <img src="./images/submit.png" alt="">
            </button>
        </div>
    </div>
</div>

<script src="./js/exif.js" type="text/javascript"></script>// 用于获取图片的朝向信息Orientation 的插件

<script>

/**
 * Created by tt on 2017/6/14.
 */
var $inpOutBorn = $(".born-wrapper");
var $inputBorn = $(".bornInp");
var $inpOutNew = $(".beauty-wrapper");
var $inputNew = $(".beautyInp");
var $readRule = $(".check");
var $submit = $("#submit");
var $successUpload = $(".successUpload");
var $message = $('#mes');
var $mareThanThree = $('.mareThanThree');
var $mention = $mareThanThree.find('.mention');
var check = false;
var Orientation;
var $downloadingPro = $('.downloadingPro');

var oldPic, newPic, matchingPic;// 存处理后的图片数据 提交用
var resultOld, resultNew;// 存图片地址 本地用

//函数调用，获取处理后的数据
upLoadPic($inputBorn, $inpOutBorn, 1);// 旧图片
upLoadPic($inputNew, $inpOutNew, 2);// 新图片

// 提示函数
function alertMention(mention) {
    $mareThanThree.show();
    $mention.html(mention);
}

// 阅读协议
$readRule.on('click', function () {
    $('#check').toggleClass('checked');
    check = !check;
});

// 图片处理
function upLoadPic(obj, out, num) {
    obj.change(function (e) {
        if (typeof FileReader != "undefined") {
            var reg = /(.jpg|.jpeg|.bmp|.png)$/;
            $($(this)[0].files).each(function () {
                var file = $(this);
                // console.