最近的微信项目中用到了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.log(typeof file[0].name.toLowerCase());
if (reg.test(file[0].name.toLowerCase())) {
$downloadingPro.show();// 显示进度
var reader = new FileReader();
EXIF.getData($(this)[0], function () {/*获取图片方向信息*/
Orientation = EXIF.getTag(this, 'Orientation') || '';
console.log(Orientation)
});
reader.onload = function (e) {
var result = this.result;
var img = new Image();
img.src = result;
if (result.length < 200 * 1024) {
// 调用处理函数 小于200kb直接上传
if (num === 1) {
if (resultNew === result) {
$downloadingPro.hide();
alertMention('请上传不同的图片');
return
}else if (Orientation === 3 || Orientation === 6 || Orientation === 8) {
// console.log(Orientation)
commonMethods.getImgData(result, Orientation, function (rotateData) {/*调用旋转函数*/
// console.log(rotateData === result) false
// console.log(rotateData === data) false
out.css({
'background': "url(" + rotateData + ") no-repeat center center",
'background-size': 'contain'
});
oldPic = commonMethods.upload(rotateData, file[0].type);
});
}else if (Orientation === '' || Orientation === 1) {
out.css({
'background': "url(" + result + ") no-repeat center center",
'background-size': 'contain'
});
oldPic = commonMethods.upload(result, file[0].type);
}
resultOld = result;
//params.append("oldPic", file[0]);
} else {
if (result === resultOld) {
$downloadingPro.hide();
alertMention('请上传不同的图片');
return
} else if (Orientation === 3 || Orientation === 6 || Orientation === 8) {
commonMethods.getImgData(result, Orientation, function (rotateData) {/*7.15*/
out.css({
'background': "url(" + rotateData + ") no-repeat center center",
'background-size': 'contain'
});
newPic = commonMethods.upload(rotateData, file[0].type);
});
} else if (Orientation === '' || Orientation === 1) {
out.css({
'background': "url(" + result + ") no-repeat center center",
'background-size': 'contain'
});
newPic = commonMethods.upload(result, file[0].type);
}
resultNew = result;
}
$downloadingPro.hide();
return
}
//超过200kb压缩 加载完后压缩
if (img.complete) {
callback();
} else {
img.onload = callback;
}
function callback() {
var data = commonMethods.compress(img);
// console.log(data) base64
if (data.length >= 3000000) {
$downloadingPro.hide();
alertMention('图片不得超过3M，请重新选择');
return
}
// 处理图片
if (num === 1) {
if (resultNew === result) {
$downloadingPro.hide();
alertMention('请上传不同的图片');
return
} else if (Orientation === 3 || Orientation === 6 || Orientation === 8) {
// console.log(Orientation)
commonMethods.getImgData(result, Orientation, function (rotateData) {/*7.15*/
// console.log(rotateData === result) false
// console.log(rotateData === data) false
out.css({
'background': "url(" + rotateData + ") no-repeat center center",
'background-size': 'contain'
});
oldPic = commonMethods.upload(rotateData, file[0].type);
});
} else if (Orientation === '' || Orientation === 1) {
out.css({
'background': "url(" + result + ") no-repeat center center",
'background-size': 'contain'
});
oldPic = commonMethods.upload(data, file[0].type);
}
resultOld = result;
} else if (num === 2) {
if (resultOld === result) {
$downloadingPro.hide();
alertMention('请上传不同的图片');
return
} else if (Orientation === 3 || Orientation === 6 || Orientation === 8) {
commonMethods.getImgData(result, Orientation, function (rotateData) {/*7.15*/
out.css({
'background': "url(" + rotateData + ") no-repeat center center",
'background-size': 'contain'
});
newPic = commonMethods.upload(rotateData, file[0].type);
});
} else if (Orientation === '' || Orientation === 1) {
out.css({
'background': "url(" + result + ") no-repeat center center",
'background-size': 'contain'
});
newPic = commonMethods.upload(data, file[0].type);
}
resultNew = result;
}
}
$downloadingPro.hide();
}
} else {
alert('只支持“jpg”、“jpeg”、“bmp”、“png”格式');
return
}
reader.readAsDataURL(file[0]);
});
}
});
}var commonMethods = {
getImgData: function (img, dir, next) {
var image = new Image();
image.onload = function () {
var degree = 0, drawWidth, drawHeight, width, height;
drawWidth = this.naturalWidth;
drawHeight = this.naturalHeight;
//以下改变一下图片大小
var maxSide = Math.max(drawWidth, drawHeight);
if (maxSide > 1024) {
var minSide = Math.min(drawWidth, drawHeight);
minSide = minSide / maxSide * 1024;
maxSide = 1024;
if (drawWidth > drawHeight) {
drawWidth = maxSide;
drawHeight = minSide;
} else {
drawWidth = minSide;
drawHeight = maxSide;
}
}
var canvas = document.createElement('canvas');
canvas.width = width = drawWidth;
canvas.height = height = drawHeight;
var context = canvas.getContext('2d');
//判断图片方向，重置canvas大小，确定旋转角度，iphone默认的是home键在右方的横屏拍摄方式
switch (dir) {
//iphone横屏拍摄，此时home键在左侧
case 3:
degree = 180;
drawWidth = -width;
drawHeight = -height;
break;
//iphone竖屏拍摄，此时home键在下方(正常拿手机的方向)
case 6:
canvas.width = height;
canvas.height = width;
degree = 90;
drawWidth = width;
drawHeight = -height;
break;
//iphone竖屏拍摄，此时home键在上方
case 8:
canvas.width = height;
canvas.height = width;
degree = 270;
drawWidth = -width;
drawHeight = height;
break;
}
//使用canvas旋转校正
context.rotate(degree * Math.PI / 180);
context.drawImage(this, 0, 0, drawWidth, drawHeight);
//返回校正图片
next(canvas.toDataURL("image/jpeg", .8));
}
image.src = img;
},
// 使用canvas对大图片进行压缩
compress: function (img) {
// 用于压缩图片的canvas
var canvas = document.createElement("canvas");
var ctx = canvas.getContext('2d');
// 瓦片canvas
var tCanvas = document.createElement("canvas");
var tctx = tCanvas.getContext("2d");
var initSize = img.src.length;
var width = img.width;
var height = img.height;
//如果图片大于四百万像素，计算压缩比并将大小压至400万以下
var ratio;
if ((ratio = width * height / 4000000) > 1) {
ratio = Math.sqrt(ratio);
width /= ratio;
height /= ratio;
} else {
ratio = 1;
}
canvas.width = width;
canvas.height = height;
// 铺底色
ctx.fillStyle = "#fff";
ctx.fillRect(0, 0, canvas.width, canvas.height);
//如果图片像素大于100万则使用瓦片绘制
var count;
if ((count = width * height / 1000000) > 1) {
count = ~~(Math.sqrt(count) + 1); //计算要分成多少块瓦片
// 计算每块瓦片的宽和高
var nw = ~~(width / count);
var nh = ~~(height / count);
tCanvas.width = nw;
tCanvas.height = nh;
for (var i = 0; i < count; i++) {
for (var j = 0; j < count; j++) {
tctx.drawImage(img, i * nw * ratio, j * nh * ratio, nw * ratio, nh * ratio, 0, 0, nw, nh);
ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh);
}
}
} else {
ctx.drawImage(img, 0, 0, width, height);
}
//进行最小压缩
var ndata = canvas.toDataURL('image/jpeg', 0.1);
console.log('压缩前：' + initSize);
console.log('压缩后：' + ndata.length);
console.log('压缩率：' + ~~(100 * (initSize - ndata.length) / initSize) + "%");
tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;
return ndata;
},
//图片转化 装入formdata里
upload: function (basestr, type) {
var text = window.atob(basestr.split(",")[1]);
var buffer = new Uint8Array(text.length);
for (var i = 0; i < text.length; i++) {
buffer[i] = text.charCodeAt(i);
}
var data = this.getBlob([buffer], type);
// var xhr = new XMLHttpRequest();
var formdata = this.getFormData();
formdata.append('imageFile', data);
return formdata;
},
/**
* 获取blob对象的兼容性写法
* @param buffer
* @param format
* @returns {*}
*/
getBlob: function (buffer, format) {
try {
return new Blob(buffer, {type: format});
} catch (e) {
var bb = new (window.BlobBuilder || window.WebKitBlobBuilder || window.MSBlobBuilder);
buffer.forEach(function (buf) {
bb.append(buf);
});
return bb.getBlob(format);
}
},
/**
* 获取formdata
*/
getFormData: function () {
var isNeedShim = ~navigator.userAgent.indexOf('Android')
&& ~navigator.vendor.indexOf('Google')
&& !~navigator.userAgent.indexOf('Chrome')
&& navigator.userAgent.match(/AppleWebKit\/(\d+)/).pop() <= 534;
return isNeedShim ? new this.FormDataShim() : new FormData();
},
/**
* formdata 补丁, 给不支持formdata上传blob的android机打补丁
* @constructor
*/
FormDataShim: function () {
console.warn('using formdata shim');
var o = this,
parts = [],
boundary = Array(21).join('-') + (+new Date() * (1e16 * Math.random())).toString(36),
oldSend = XMLHttpRequest.prototype.send;
this.append = function (name, value, filename) {
parts.push('--' + boundary + '\r\nContent-Disposition: form-data; name="' + name + '"');
if (value instanceof Blob) {
parts.push('; filename="' + (filename || 'blob') + '"\r\nContent-Type: ' + value.type + '\r\n\r\n');
parts.push(value);
}
else {
parts.push('\r\n\r\n' + value);
}
parts.push('\r\n');
};
// Override XHR send()
XMLHttpRequest.prototype.send = function (val) {
var fr,
data,
oXHR = this;
if (val === o) {
// Append the final boundary string
parts.push('--' + boundary + '--\r\n');
// Create the blob
data = this.getBlob(parts);
// Set up and read the blob into an array to be sent
fr = new FileReader();
fr.onload = function () {
oldSend.call(oXHR, fr.result);
};
fr.onerror = function (err) {
throw err;
};
fr.readAsArrayBuffer(data);
// Set the multipart content type and boudary
this.setRequestHeader('Content-Type', 'multipart/form-data; boundary=' + boundary);
XMLHttpRequest.prototype.send = oldSend;
}
else {
oldSend.call(this, val);
}
};
}
};
// 图片拼接
function picMatching(srcOld, srcNew) {
var canvas = document.createElement('canvas');
canvas.width = 200;
canvas.height = 100;
var ctx = canvas.getContext('2d');
if (srcOld && srcNew) {
var img1 = new Image();
var img2 = new Image();
var imgResult = new Image();
img1.src = srcOld;
img2.src = srcNew;
for (var i = 0; i < 2; i++) {
if (i === 0) {
ctx.drawImage(img1, 0, 0, 100, 100);
} else if (i === 1) {
ctx.drawImage(img2, 100, 0, 100, 100);
}
}
var srcMatching = canvas.toDataURL('image/png');
imgResult.src = srcMatching;
//转化为formData
if (srcMatching.length < 3000000) {
matchingPic = commonMethods.upload(srcMatching, 'image/png');// 拼接后的图片
// console.log(matchingPic);
} else {
var data = commonMethods.compress(imgResult);// 压缩图片
matchingPic = commonMethods.upload(data, 'image/png');
}
// $('.takeIn').append(imgResult);
return matchingPic;
}
}
// 最后提交数据
$submit.on('click', function () {
var matchingData = picMatching(resultOld, resultNew);
var message = $message.val();
if (!(oldPic && newPic)) {
alertMention('请选择图片'); // 如果没选择图片
return
} else if (!message) {
alertMention('请填写留言'); // 如果没留言
return
} else if (!check) {
alertMention('请勾选协议');// 如果没勾选协议
return
}
if (oldPic && newPic && check && message) {
$downloadingPro.show();// 显示进度 7.3
//console.log(99)
$.ajax({
url: '',// 提交地址
type: 'POST',
data: {
oldPic: oldPic,
newPic: newPic,
matchingPic: matchingData,
message: message
},
/**
* 必须false才会避开jQuery对 formdata 的默认处理
* XMLHttpRequest会对 formdata 进行正确的处理
*/
processData: false,
/**
*必须false才会自动加上正确的Content-Type
*/
contentType: false
}).done(function (res) {
// 判断res值,上传成功 if(){$successUpload.show();} 删除进度条
$('.balloon').hide();// 隐藏气球
$downloadingPro.hide();// 7.3
$successUpload.show();// 成功弹层
}).fail(function (res) {
alertMention('服务器繁忙，请稍后重试');//1111111111111111
});
}
});
</script>