在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
iOS 竖着拍的图片上传之后被旋转了90° 然后我加了 imageMogr/auto-orient
返回的图片还是竖着的啊 请问怎么解决，谢谢
来源: 七牛云存储问答
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
这个问题跟七牛没关系，建议你看一下 UIImage 的 imageOrientation 属性。
加了 imageMogr/auto-orient 后返回的是竖着的图片，也就是说是正常的结果，还有什么问题需要解决吗？如果你是想做到竖着拍的图片传上去之后也是竖着的，不需要 auto-orient 也能返回竖着的图片的话，可以在上传图片之前，对 image 的 orientation 做修正，这里有很多示例代码：
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。&&文章详情
有道云笔记如何旋转和保存图片？
　　方法　　1、保存在笔记的图片，倒向了一边　　2、右键先把向右转　　3、把图片恢复过来　　4、右键点击先把另存为　　5、先把一个保存位置　　6、保存到桌面成功
(C) Knowsky.com详解利用exif.js解决ios手机上传竖拍照片旋转90度问题_javascript技巧
作者：用户
本文讲的是详解利用exif.js解决ios手机上传竖拍照片旋转90度问题_javascript技巧，
HTML5+canvas进行移动端手机照片上传时，发现iOS手机上传竖拍照片会逆时针旋转90度，横拍照片无此问题；Android手机没这个问题。
因此解决这个问题的思路是：获取到照片拍摄的方向角，对非横拍的ios照片进行角度旋转修正。
HTML5+canvas进行移动端手机照片上传时，发现iOS手机上传竖拍照片会逆时针旋转90度，横拍照片无此问题；Android手机没这个问题。
因此解决这个问题的思路是：获取到照片拍摄的方向角，对非横拍的ios照片进行角度旋转修正。
利用exif.js读取照片的拍摄信息，这里主要用到Orientation属性。
Orientation属性说明如下：
下面就直接上代码了。
主要有5页面和一个js，示例功能包含了图片压缩和旋转。
自己写的是uploadImage.js。
html5测试页面如下：
&!DOCTYPE html&
&meta charset="utf-8"&
&meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /&
&title&图片上传&/title&
&script type="text/javascript" src="js/jquery-1.8.3.js"&&/script&
&script type="text/javascript" src="js/uploadPicture/uploadImage.js" &&/script&
&script type="text/javascript" src="js/exif.js" &&/script&
&div style="height: 50 line-height: 50text-align:border-bottom: 1px solid #171E28;"&
&input type="file" accept="image/*" id="uploadImage" capture="camera" onchange="selectFileImage(this);" /&
&div style="margin-top: 10"&
&img alt="preview" src="" id="myImage"/&
uploadImage.js如下：
function selectFileImage(fileObj) {
var file = fileObj.files['0'];
//图片方向角 added by lzk
var Orientation =
if (file) {
console.log("正在上传,请稍后...");
var rFilter = /^(image\/jpeg|image\/png)$/i; // 检查图片格式
if (!rFilter.test(file.type)) {
//showMyTips("请选择jpeg、png格式的图片", false);
// var URL = URL || webkitURL;
//获取照片方向角属性，用户旋转控制
EXIF.getData(file, function() {
// alert(EXIF.pretty(this));
EXIF.getAllTags(this);
//alert(EXIF.getTag(this, 'Orientation'));
Orientation = EXIF.getTag(this, 'Orientation');
var oReader = new FileReader();
oReader.onload = function(e) {
//var blob = URL.createObjectURL(file);
//_compress(blob, file, basePath);
var image = new Image();
image.src = e.target.
image.onload = function() {
var expectWidth = this.naturalW
var expectHeight = this.naturalH
if (this.naturalWidth & this.naturalHeight && this.naturalWidth & 800) {
expectWidth = 800;
expectHeight = expectWidth * this.naturalHeight / this.naturalW
} else if (this.naturalHeight & this.naturalWidth && this.naturalHeight & 1200) {
expectHeight = 1200;
expectWidth = expectHeight * this.naturalWidth / this.naturalH
var canvas = document.createElement("canvas");
var ctx = canvas.getContext("2d");
canvas.width = expectW
canvas.height = expectH
ctx.drawImage(this, 0, 0, expectWidth, expectHeight);
var base64 =
if (navigator.userAgent.match(/iphone/i)) {
console.log('iphone');
//alert(expectWidth + ',' + expectHeight);
//如果方向角不为1，都需要进行旋转 added by lzk
if(Orientation != "" && Orientation != 1){
alert('旋转处理');
switch(Orientation){
case 6://需要顺时针（向左）90度旋转
alert('需要顺时针（向左）90度旋转');
rotateImg(this,'left',canvas);
case 8://需要逆时针（向右）90度旋转
alert('需要顺时针（向右）90度旋转');
rotateImg(this,'right',canvas);
case 3://需要180度旋转
alert('需要180度旋转');
rotateImg(this,'right',canvas);//转两次
rotateImg(this,'right',canvas);
/*var mpImg = new MegaPixImage(image);
mpImg.render(canvas, {
maxWidth: 800,
maxHeight: 1200,
quality: 0.8,
orientation: 8
base64 = canvas.toDataURL("image/jpeg", 0.8);
}else if (navigator.userAgent.match(/Android/i)) {// 修复android
var encoder = new JPEGEncoder();
base64 = encoder.encode(ctx.getImageData(0, 0, expectWidth, expectHeight), 80);
//alert(Orientation);
if(Orientation != "" && Orientation != 1){
//alert('旋转处理');
switch(Orientation){
case 6://需要顺时针（向左）90度旋转
alert('需要顺时针（向左）90度旋转');
rotateImg(this,'left',canvas);
case 8://需要逆时针（向右）90度旋转
alert('需要顺时针（向右）90度旋转');
rotateImg(this,'right',canvas);
case 3://需要180度旋转
alert('需要180度旋转');
rotateImg(this,'right',canvas);//转两次
rotateImg(this,'right',canvas);
base64 = canvas.toDataURL("image/jpeg", 0.8);
//uploadImage(base64);
$("#myImage").attr("src", base64);
oReader.readAsDataURL(file);
//对图片旋转处理 added by lzk
function rotateImg(img, direction,canvas) {
//alert(img);
//最小与最大旋转方向，图片旋转4次后回到原方向
var min_step = 0;
var max_step = 3;
//var img = document.getElementById(pid);
if (img == null)
//img的高度和宽度不能在img元素隐藏后获取，否则会出错
var height = img.
var width = img.
//var step = img.getAttribute('step');
var step = 2;
if (step == null) {
step = min_
if (direction == 'right') {
//旋转到原位置，即超过最大值
step & max_step && (step = min_step);
step & min_step && (step = max_step);
//img.setAttribute('step', step);
/*var canvas = document.getElementById('pic_' + pid);
if (canvas == null) {
img.style.display = 'none';
canvas = document.createElement('canvas');
canvas.setAttribute('id', 'pic_' + pid);
img.parentNode.appendChild(canvas);
//旋转角度以弧度值为参数
var degree = step * 90 * Math.PI / 180;
var ctx = canvas.getContext('2d');
switch (step) {
canvas.width =
canvas.height =
ctx.drawImage(img, 0, 0);
canvas.width =
canvas.height =
ctx.rotate(degree);
ctx.drawImage(img, 0, -height);
canvas.width =
canvas.height =
ctx.rotate(degree);
ctx.drawImage(img, -width, -height);
canvas.width =
canvas.height =
ctx.rotate(degree);
ctx.drawImage(img, -width, 0);
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持云栖社区。
以上是云栖社区小编为您精心准备的的内容，在云栖社区的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索js
exif javascript、java exif 旋转、js exif 旋转、android exif 旋转、exif 旋转，以便于您获取更多的相关知识。
稳定可靠、可弹性伸缩的在线数据库服务，全球最受欢迎的开源数据库之一
6款热门基础云产品6个月免费体验；2款产品1年体验;1款产品2年体验
弹性可伸缩的计算服务，助您降低 IT 成本，提升运维效率
开发者常用软件，超百款实用软件一站式提供
云栖社区(yq.aliyun.com)为您免费提供相关信息，包括
，所有相关内容均不代表云栖社区的意见！传到QQ空间的相片歪着,怎么能正过来?
可以点击旋转图片按钮来调整图片。具体步骤如下：1、点击进入QQ空间个人相册页面。2、点击打开照片，点击“旋转”按钮来调整图片到一个合适的位置。3、确认保存旋转后的照片。
用绘图软件旋转+调整就可以了
云端。百度云端360云端这些都可以存放！
QQ空间会自动缩减照片大小，避免海量照片带来存储量巨大压力问题。如果确实想要原图效果，可找一支持不缩减照片的网站传上去，然后在QQ空间里引用该网站的URL。
你把那张图存到本地电脑里，再打开，下面有一排小图标，你找到旋转的那个，把他转正，再传到空间就OK了`
打开你的空间-找到相册-创建新相册-然后打开新建的相册。电击添加照片,再上传照片就OK了
你把照片先存在电脑桌面再在空间进入相册点上传选择路劲后就可以了打开空间点击相册，你没有的话就点创建相册，有的话直接点上传照片，前提照片在你电脑里，然后点 添加照片，想传哪张就点哪张，然后点添加，点开始上传，点确定就哦了
先在电脑上登陆qq，在qq主界面点击五角星的按钮，进入qq空间；进入空间后，在导航栏里点击”相册“；打开相册后，可以先点击“创建相册”，或者直接点击“上传照片”；接着在上传照片的页面上点击“选择照片”；在弹出来的“添加照片”的窗口上，选择“我的文档”，再选中需要上传的照片，点击“确定”，等待上传完成即可。
人的综合分
感谢您为社区的和谐贡献力量请选择举报类型
经过核实后将会做出处理感谢您为社区和谐做出贡献
确定要取消此次报名，退出该活动？扫一扫，访问微社区
查看: 1189|回复: 7
云币11 威望4 最后登录积分34注册时间帖子
小白［LV1］, 积分 34, 距离下一级还需 266 积分
云币11 威望4
如题 我们是做APP的 图片用万象上传之后 这边用url显示在APP上发现有些图片被旋转了90度
云币1 威望1 最后登录积分626注册时间帖子
程序猿［LV2］, 积分 626, 距离下一级还需 574 积分
云币1 威望1
&&亲~参考这个参数试试
17:02 上传
云币11 威望4 最后登录积分34注册时间帖子
小白［LV1］, 积分 34, 距离下一级还需 266 积分
云币11 威望4
这个功能没有参数可以关闭的吗
云币2483 威望3835 最后登录积分3835注册时间帖子
云币2483 威望3835
控制台试试& && && && && && && &
云币11 威望4 最后登录积分34注册时间帖子
小白［LV1］, 积分 34, 距离下一级还需 266 积分
云币11 威望4
Cloudnan 发表于
http://www.qcloud.com/wiki/%E4%B ... I%E6%96%87%E6%A1%A3&&亲~参考这个参数试试
这个是加在上传的URL上的吗 还是加在读取的URL
云币11 威望4 最后登录积分34注册时间帖子
小白［LV1］, 积分 34, 距离下一级还需 266 积分
云币11 威望4
Cloudnan 发表于
http://www.qcloud.com/wiki/%E4%B ... I%E6%96%87%E6%A1%A3&&亲~参考这个参数试试
/auto-orient& & & & 根据exif信息自动把图片旋转回正
/strip& & & & 去除不安全代码包括exif信息
这两个用了没用 只能用 /rotate/&rotateDegree&强行旋转回来
但是有一些图片旋转90度 有些180 没办法判断啊
云币234 威望80 最后登录积分80注册时间帖子
小白［LV1］, 积分 80, 距离下一级还需 220 积分
云币234 威望80
遇到同样的问题，顶起来，请问怎么解决的
云币50921 威望6792 最后登录积分6792注册时间帖子
云币50921 威望6792
小虫子 发表于
遇到同样的问题，顶起来，请问怎么解决的
/auto-orient& && &&&根据exif信息自动把图片旋转回正
尝试用这个参数了么
Powered by