最近的微信项目中用到了input标签来上传图片文件,遇到两个大问题:
1、图片太大,导致上传速度慢,影响体验,需要压缩后上传;
2、有些手机拍照是横屏的,在页面展示的时候和正常方向相差90度,也就是本该立着的照片躺下了,需要根据具体情况修正后上传;
手机上的效果是这样的:
上传后确是这样的:
而我想要的是正确朝上的图片,查了资料后发现这是一些手机横着拍照导致的:
其实是拿手机拍照的方向问题,iphone正确的手机拍照方式是横屏的,用户往往是竖屏拍照等于照相机反转了90度,出来的照片当然是反转90度,当你横屏拍照上传,图片就是正确的,一张生成的图片是无法辨别选择方向的,只有在上传前反转角度才行, 因为上传到服务器以后,程序怎么可能知道这张照片要反转90度,那张要反转180度,另一张要反转270度呢,其他的不用反转呢,正确的拍照姿势很重要呀,哈哈。。。蛋疼的问题
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.