前端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 的插件