前端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 class="content-uploading"&
&div class="uploading"&
&div class="born-wrapper"&
&input type="file" name="born" class="bornInp" id="bornInp"&
&div class="vs-wrapper"&
&img class="vs" src="./images/slide-1-vs.png" alt=""&
&div class="beauty-wrapper"&
&input type="file" name="beauty" class="beautyInp" id="beautyInp"&
&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&
&button class="submit" id="submit" type="button"&
&img src="./images/submit.png" alt=""&
&script src="./js/exif.js" type="text/javascript"&&/script&// 用于获取图片的朝向信息Orientation 的插件
* Created by tt on .
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('请上传不同的图片');
}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
'background': "url(" + rotateData + ") no-repeat center center",
'background-size': 'contain'
oldPic = commonMethods.upload(rotateData, file[0].type);
}else if (Orientation === '' || Orientation === 1) {
'background': "url(" + result + ") no-repeat center center",
'background-size': 'contain'
oldPic = commonMethods.upload(result, file[0].type);
resultOld = result;
//params.append("oldPic", file[0]);
if (result === resultOld) {
$downloadingPro.hide();
alertMention('请上传不同的图片');
} else if (Orientation === 3 || Orientation === 6 || Orientation === 8) {
commonMethods.getImgData(result, Orientation, function (rotateData) {/*7.15*/
'background': "url(" + rotateData + ") no-repeat center center",
'background-size': 'contain'
newPic = commonMethods.upload(rotateData, file[0].type);
} else if (Orientation === '' || Orientation === 1) {
'background': "url(" + result + ") no-repeat center center",
'background-size': 'contain'
newPic = commonMethods.upload(result, file[0].type);
resultNew = result;
$downloadingPro.hide();
//超过200kb压缩 加载完后压缩
if (img.complete) {
callback();
img.onload = callback;
function callback() {
var data = commonMethods.compress(img);
// console.log(data) base64
if (data.length &= 3000000) {
$downloadingPro.hide();
alertMention('图片不得超过3M，请重新选择');
// 处理图片
if (num === 1) {
if (resultNew === result) {
$downloadingPro.hide();
alertMention('请上传不同的图片');
} 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
'background': "url(" + rotateData + ") no-repeat center center",
'background-size': 'contain'
oldPic = commonMethods.upload(rotateData, file[0].type);
} else if (Orientation === '' || Orientation === 1) {
'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('请上传不同的图片');
} else if (Orientation === 3 || Orientation === 6 || Orientation === 8) {
commonMethods.getImgData(result, Orientation, function (rotateData) {/*7.15*/
'background': "url(" + rotateData + ") no-repeat center center",
'background-size': 'contain'
newPic = commonMethods.upload(rotateData, file[0].type);
} else if (Orientation === '' || Orientation === 1) {
'background': "url(" + result + ") no-repeat center center",
'background-size': 'contain'
newPic = commonMethods.upload(data, file[0].type);
resultNew = result;
$downloadingPro.hide();
alert('只支持“jpg”、“jpeg”、“bmp”、“png”格式');
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;
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键在左侧
degree = 180;
drawWidth = -width;
drawHeight = -height;
//iphone竖屏拍摄，此时home键在下方(正常拿手机的方向)
canvas.width = height;
canvas.height = width;
degree = 90;
drawWidth = width;
drawHeight = -height;
//iphone竖屏拍摄，此时home键在上方
canvas.width = height;
canvas.height = width;
degree = 270;
drawWidth = -width;
drawHeight = height;
//使用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;
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);
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) {
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- name="' + name + '"');
if (value instanceof Blob) {
parts.push('; filename="' + (filename || 'blob') + '"\r\nContent-Type: ' + value.type + '\r\n\r\n');
parts.push(value);
parts.push('\r\n\r\n' + value);
parts.push('\r\n');
// Override XHR send()
XMLHttpRequest.prototype.send = function (val) {
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- boundary=' + boundary);
XMLHttpRequest.prototype.send = oldSend;
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);
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('请选择图片'); // 如果没选择图片
} else if (!message) {
alertMention('请填写留言'); // 如果没留言
} else if (!check) {
alertMention('请勾选协议');// 如果没勾选协议
if (oldPic && newPic && check && message) {
$downloadingPro.show();// 显示进度 7.3
//console.log(99)
url: '',// 提交地址
type: 'POST',
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('服务器繁忙，请稍后重试');//1111
移动端上传图片 支持图片预览、压缩、大图分片压缩、压缩后上传 解决了IOS竖屏拍照旋转90度的问题
前端 图片旋转角度(如90,180,左转,右转)
前端把图片转为base64，解决手机上传图片自动旋转的问题
jQuery实现对file对象的压缩
input为file上传文件
js上传图片处理：压缩，旋转校正图片
利用exif.js解决ios手机上传竖拍照片旋转90度问题
解决图片旋转的问题
【web】js图片压缩并上传——图片压缩-demo01
没有更多推荐了，已解决问题
微信拍照怎么变了，我是苹果手机，自从升级了微信后拍照时就变成这样了
提问时间： 12:44:52
微信拍照怎么变了，我是苹果手机，自从升级了微信后拍照时就变成这样了
浏览次数：2996
其实各大网站都有相关的软件但是能不能使用我就不知道到了。就可以跳转到微信聊天记录里面去了。只需要点击微信按钮。&br/&5、手机短信。各位最好使用本文中提到的相关软件&&互盾安卓恢复大师。您进入手机设置--更多设置--应用程序--全部中找到相机并清除数据然后重启一下手机试试的。。
答案创立者
以企业身份回答&
快速解决你的电商难题
店铺优化排查提升2倍流量
擅长&nbsp 店铺优化
您可能有同感的问题请问大家为什么我用苹果7p拍照效果特别清晰，从相册看或者传微信朋友_百度知道
请问大家为什么我用苹果7p拍照效果特别清晰，从相册看或者传微信朋友
请问大家为什么我用苹果7p拍照效果特别清晰，从相册看或者传微信朋友圈都是特别清晰，可是发布到手机淘宝详情页里面发布出来就模糊了？怎么才能解决这个问题？...
请问大家为什么我用苹果7p拍照效果特别清晰，从相册看或者传微信朋友圈都是特别清晰，可是发布到手机淘宝详情页里面发布出来就模糊了？怎么才能解决这个问题？
答题抽奖
首次认真答题后
即可获得3次抽奖机会，100%中奖。
移蹿乩抡知道合伙人
来自电子数码类芝麻团
采纳数：129
获赞数：234
擅长：暂未定制
参与团队：
7plus两颗摄像头，照片都不用调焦，拍出来的东西更清楚。比如10米之外有张海报，plus拍出来的照片不停放大，可以看清楚海边上的字。单摄像头的就看不清楚了
为你推荐：
其他类似问题
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。iPhone7每次自拍完照片都会自动镜象翻转是怎么回事？能调回来吗？_百度知道
iPhone7每次自拍完照片都会自动镜象翻转是怎么回事？能调回来吗？
go小小七666知道合伙人
来自知道合伙人认证团队
go小小七666
知道合伙人
采纳数：354
获赞数：605
擅长：暂未定制
你是不是升级10.2.1了，应该是描述文件丢失导致的。苹果7前摄像头拍照后保存的照片左右反转了属于正常现象，因为前置摄像头拍照的时候就是利用镜面成像的原理，所以用前置摄像头拍出来的照片就是左右颠倒的。用户可以先用前置摄像头拍照，然后将左右颠倒的照片自己翻转调回来记忆可以了。苹果手机的前置摄像头为了自拍象照镜子一般让大众感觉上更为习惯，对前置摄像头都是按镜像设计的。镜像图片就是照出来的相片左右感觉如同你照镜子一样对应。安装第三方照相软件来拍摄避免自动镜像。不管镜像，正常拍摄后，进入相册打开图片，利用编辑功能选择左右翻转，然后保存即可。
为你推荐：
其他类似问题
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。苹果7P转角遇上华为Mate9！
日10时31分来源：
华为 Mate 9 终于强势到来，而且和 iPhone 7 Plus 一样也是双摄像头！同是两款刚发布不久的双摄像头手机，它们的拍照性能谁更强？
目前市场上的手机，双摄像头组合大致可分成两类：彩色 CMOS 搭配黑白 CMOS ；广角搭配长焦这两大类。而恰好，华为 Mate 9 选择了前者，iPhone 7 Plus 则选择了后者，所以两款手机的拍照性能就很有可比性。以下两张对比图，一眼看上去，其实两款手机的表现孰高孰低真的很难分辨出来。不管从细节、还原度，还是色彩，两者都势均力敌。不过从性能上来说，华为 Mate 9 在拍照的时会更注重色彩，而 iPhone 7 Plus 则更加注重变焦性能与肖像景深。
Mate 9拍摄
iPhone 7 Plus拍摄
之前也有很多人提到过， iPhone 7 Plus 拍出来的照片与实物最接近，在细节上，iPhone 7 Plus 似乎也是更胜一筹。不过，从色彩上看，华为 Mate 9 还是发挥了自己的优势，它出来的色彩更棒。
总体来说，两款手机各有千秋，各有各的优势。要哎妹来评价的话，要是iPhone 7 Plus 能兼顾 Mate 9 的色彩，或者Mate 9 拥有 iPhone 7 Plus 处理细节的能力，那才真是完美~
将哎咆【原果粉查询】置顶
不错过任何福利进入‘哎咆科技’—点击右上角—置顶公众号
戳“阅读原文”，查看哎咆精选~}