问题描述:

手机头像上传,遇到一个怪现象,就是拍照上传时,手机端显示头像正常,但在web端查看会有一个左旋90度的问题。

并且照片竖怕才会有此问题,横拍不存在。

原因分析:

手机拍照时,用相机拍摄出来的照片是含有EXIF信息的,在我们得到 UIImage时,可以查看此Image的imageOrientation属性,其实就是指的EXIF中的orientation信息。

如果我们忽略orientation信息,而直接对照片进行像素处理或上传等操作,得到的结果是翻转或者旋转90之后的样子。

这是因为我们执行像素处理或者drawInRect等操作之后,imageOrientaion信息被删除了,imageOrientaion被重设为0,造成照片内容和imageOrientaion不匹配。

所以,在对照片进行处理之前,先将照片旋转到正确的方向,保证返回的imageOrientaion为0。

解决方法:

Swift版:

/**
照片竖拍 web显示旋转解决:图片大于2M会自动旋转90度 - parameter aImage: <#aImage description#> - returns: <#return value description#>
*/
class func fixOrientation(aImage:UIImage)->UIImage {
if aImage.imageOrientation == UIImageOrientation.Up{
return aImage
} var transform = CGAffineTransformIdentity switch (aImage.imageOrientation) {
case .Down,.DownMirrored:
transform = CGAffineTransformTranslate(transform, aImage.size.width, aImage.size.height)
transform = CGAffineTransformRotate(transform, CGFloat(M_PI))
break; case .Left,.LeftMirrored:
transform = CGAffineTransformTranslate(transform, aImage.size.width, 0)
transform = CGAffineTransformRotate(transform, CGFloat(M_PI_2))
break; case .Right,.RightMirrored:
transform = CGAffineTransformTranslate(transform, 0, aImage.size.height)
transform = CGAffineTransformRotate(transform, CGFloat(-M_PI_2))
break;
default:
break;
} switch (aImage.imageOrientation) {
case .UpMirrored,.DownMirrored:
transform = CGAffineTransformTranslate(transform, aImage.size.width, 0)
transform = CGAffineTransformScale(transform, -1, 1)
break; case .LeftMirrored,.RightMirrored:
transform = CGAffineTransformTranslate(transform, aImage.size.height, 0)
transform = CGAffineTransformScale(transform, -1, 1)
break;
default:
break;
} let ctx:CGContextRef = CGBitmapContextCreate(nil, Int(aImage.size.width), Int(aImage.size.height),
CGImageGetBitsPerComponent(aImage.CGImage), 0,
CGImageGetColorSpace(aImage.CGImage),
1)! CGContextConcatCTM(ctx, transform)
switch (aImage.imageOrientation) {
case .Left,.LeftMirrored,.Right,.RightMirrored:
CGContextDrawImage(ctx, CGRectMake(0,0,aImage.size.height,aImage.size.width), aImage.CGImage)
break; default:
CGContextDrawImage(ctx, CGRectMake(0,0,aImage.size.width,aImage.size.height), aImage.CGImage);
break;
} let cgimg:CGImageRef = CGBitmapContextCreateImage(ctx)!
let img:UIImage = UIImage(CGImage: cgimg)
return img;
}

  

OC版:

- (UIImage *)fixOrientation:(UIImage *)aImage {  

  // No-op if the orientation is already correct
if (aImage.imageOrientation == UIImageOrientationUp)
return aImage; // We need to calculate the proper transformation to make the image upright.
// We do it in 2 steps: Rotate if Left/Right/Down, and then flip if Mirrored.
CGAffineTransform transform = CGAffineTransformIdentity; switch (aImage.imageOrientation) {
case UIImageOrientationDown:
case UIImageOrientationDownMirrored:
transform = CGAffineTransformTranslate(transform, aImage.size.width, aImage.size.height);
transform = CGAffineTransformRotate(transform, M_PI);
break; case UIImageOrientationLeft:
case UIImageOrientationLeftMirrored:
transform = CGAffineTransformTranslate(transform, aImage.size.width, 0);
transform = CGAffineTransformRotate(transform, M_PI_2);
break; case UIImageOrientationRight:
case UIImageOrientationRightMirrored:
transform = CGAffineTransformTranslate(transform, 0, aImage.size.height);
transform = CGAffineTransformRotate(transform, -M_PI_2);
break;
default:
break;
} switch (aImage.imageOrientation) {
case UIImageOrientationUpMirrored:
case UIImageOrientationDownMirrored:
transform = CGAffineTransformTranslate(transform, aImage.size.width, 0);
transform = CGAffineTransformScale(transform, -1, 1);
break; case UIImageOrientationLeftMirrored:
case UIImageOrientationRightMirrored:
transform = CGAffineTransformTranslate(transform, aImage.size.height, 0);
transform = CGAffineTransformScale(transform, -1, 1);
break;
default:
break;
} // Now we draw the underlying CGImage into a new context, applying the transform
// calculated above.
CGContextRef ctx = CGBitmapContextCreate(NULL, aImage.size.width, aImage.size.height,
CGImageGetBitsPerComponent(aImage.CGImage), 0,
CGImageGetColorSpace(aImage.CGImage),
CGImageGetBitmapInfo(aImage.CGImage));
CGContextConcatCTM(ctx, transform);
switch (aImage.imageOrientation) {
case UIImageOrientationLeft:
case UIImageOrientationLeftMirrored:
case UIImageOrientationRight:
case UIImageOrientationRightMirrored:
// Grr...
CGContextDrawImage(ctx, CGRectMake(0,0,aImage.size.height,aImage.size.width), aImage.CGImage);
break; default:
CGContextDrawImage(ctx, CGRectMake(0,0,aImage.size.width,aImage.size.height), aImage.CGImage);
break;
} // And now we just create a new UIImage from the drawing context
CGImageRef cgimg = CGBitmapContextCreateImage(ctx);
UIImage *img = [UIImage imageWithCGImage:cgimg];
CGContextRelease(ctx);
CGImageRelease(cgimg);
return img;
}

  

亲测,在完成拍照代理里,获取到图片后,用此方法处理后,再上传服务器,可解决该问题。

            //若是图片
var img:UIImage = info[UIImagePickerControllerOriginalImage] as! UIImage
//保存相册
UIImageWriteToSavedPhotosAlbum(img, self, nil, nil) img = PublicMethod.fixOrientation(img) //压缩图片
let imgData:NSData = UIImageJPEGRepresentation(img, 0.2)!
//上传服务器
self.uploadHeadImg(imgData, headImage: img)

  

参考文献:http://blog.csdn.net/hitwhylz/article/details/39518463

如果有疑问,欢迎留言。

iOS拍照上传后,在web端显示旋转 Swift+OC版解决方案的更多相关文章

  1. iOS和小米手机拍照上传后,在web端显示旋转

    ( ′◔ ‸◔`)现在的公司啊都流行混合开发,我们公司也不例外,非要把交互非常多的社区模块用内嵌web页展示,好吧好吧,毕竟有的应用也是这么做的,那既然是社区就肯定少不了用户上传图片的操作,在开发阶段 ...

  2. ios端浏览器拍照上传到服务器,图片被旋转90度 php 解决方案

    1.可以通过前端进行解决,本案例通过后端解决的 判断请求的浏览器的ua,如果是ios浏览器则进行90度旋转 重点来了: 必须确保检测的图片是ios设备上传的完整图片,不要在前端压缩过的,因为压缩后的图 ...

  3. iOS图片上传后被旋转的问题

    最近用PHP做了一个图片合成程序,前端是通过HTML的file input选取自定图片,POST到php后台调整尺寸后与事先准备好的背景图进行合成. 通过测试发现,上传后的自定图片有的被旋转了,有的是 ...

  4. webAPP如何实现移动端拍照上传(Vue组件示例)?

    摘要:使用HTML5编写移动Web应用,主要是为了尝试一下“一套代码多处运行”,一个webapp几乎可以不加修改的运行在PC/Android/iOS等上面运行.但是写到现在觉得虽然这种方式弊大于利,不 ...

  5. 利用exif.js解决ios手机上传竖拍照片旋转90度问题

    html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题:Android手机没这个问题. 因此解决这个问题的思路是:获取到照片拍摄的方向角,对非 ...

  6. html5调用手机摄像头,实现拍照上传功能

    今天做手机网站,想实现手机扫描二维码功能.首先实现在浏览器中调用手机摄像头,实现拍照功能并且把拍下的照片显示在页面并上传到服务器上,然后再在服务器端进行分析. 首先实现在浏览器中调用摄像头,当然用现在 ...

  7. 修正ios h5上传图时的图片方向问题

     .ios上传会在exif中带一个 Orientation的属性,这个属性在windows中不会生效,在ios浏览器中会生效,造成图片在windows资源管理器中与ios浏览器中方向不一致  为了用户 ...

  8. Android4.4 + WebAPI 实现拍照上传

    网上有很多关于拍照上传的实现方法,如果用新版本android去运行有可能会发现根本实现不了.主要原因是android从4.4版本开始通过intent.ACTION_GET_CONTENT打开选择器后, ...

  9. php实现手机拍照上传头像功能

    现在手机拍照很火,那么如何使用手机拍照并上传头像呢?原因很简单,就是数据传递,首先手机传递照片信息,这个就不是post传递 也不是get函数传递, 这个另外一种数据格式传递,使用的是$GLOBALS ...

随机推荐

  1. Scalaz(27)- Inference & Unapply :类型的推导和匹配

    经过一段时间的摸索,用scala进行函数式编程的过程对我来说就好像是想着法儿如何将函数的款式对齐以及如何正确地匹配类型,真正是一种全新的体验,但好像有点太偏重学术型了. 本来不想花什么功夫在scala ...

  2. C语言的关键字,运算符,标识符

    关键字 数据类型修饰相关 auto按照自动的方式进行变量的存储 const定义常量或常参数 extern声明外部变量或函数 register指定变量的存储类型是寄存器变量 static指定变量的存储类 ...

  3. mysq基础一(字段类型)

    本文转自 “旋木的技术博客” 博客,http://mrxiong.blog.51cto.com/287318/1651098 一.数值类型 Mysql支持所有标准SQL中的数值类型,其中包括严格数据类 ...

  4. javascript通用事件封装

    随着最近几年Html5的兴起,越来越多的应用采用html5进行实现,一个优秀的网页应用不但需要美观简洁的UI界面,更需要一个良好的交互.网页应用大部分的交互需要用javascript事件进行实现.虽然 ...

  5. Julius JS – 最流行的网页语音识别库

    JuliusJS 是用于在网页中的语音识别库.这是 Julius(由日本京都大学和日本IPA联合开发的一个实用高效双通道的大词汇连续语音识别引擎)的 JavaScript 实现.它实时侦听用户的语音并 ...

  6. 类似 Dribbble 下载按钮的 SVG 弹性动画进度条

    Codrops 发布了一个如何创建一个基于弹性效果的 SVG 加载进度条教程,基于 SVG 和 TweenMax 实现.按钮开始的时候是一个带有箭头的图标,一旦它被点击,动画成一个有趣的小金属丝和一个 ...

  7. BitcoinJS - 支持比特币交易的 JavaScript 库

    BitcoinJS 是一个干净,可读的 JavaScript 开发库,用于比特币交易.支持 Node.js 平台和浏览器端.已有超过150万的钱包用户在使用, BitcoinJS 是几乎所有的 Web ...

  8. 在你设计中可能用到的20个杂志 PSD 原型

    你是否正在为您的印刷产品找一些现成的原型素材?在这里,我们收集了一组免费的杂志 PSD 素材,必将派上用场.这些原型将给你和你的客户一个先睹为快的产品,在现实生活中看起来如何.所有这些原型提供了可以免 ...

  9. [deviceone开发]-HeaderView和FooterView的示例

    一.简介 这个是利用do_ListView组件实现下拉和上拉刷新功能的例子,除了do_ListView,其它比如do_Webview,do_ScrollView都有这个个功能.对应的BBS里的帖子详细 ...

  10. tmtTable设计说明文档

    文件链接:tmt-table.js BOSS后台项目用到最多的就是列表页,所以把列表页做成通用组件,可以大大提高开发效率. 因为列表可能有不同的样式,所以在实例化组件时可以传值控制样式,用这种方式: ...