iOS拍照上传后,在web端显示旋转 Swift+OC版解决方案
问题描述:
手机头像上传,遇到一个怪现象,就是拍照上传时,手机端显示头像正常,但在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版解决方案的更多相关文章
- iOS和小米手机拍照上传后,在web端显示旋转
		
( ′◔ ‸◔`)现在的公司啊都流行混合开发,我们公司也不例外,非要把交互非常多的社区模块用内嵌web页展示,好吧好吧,毕竟有的应用也是这么做的,那既然是社区就肯定少不了用户上传图片的操作,在开发阶段 ...
 - ios端浏览器拍照上传到服务器,图片被旋转90度 php 解决方案
		
1.可以通过前端进行解决,本案例通过后端解决的 判断请求的浏览器的ua,如果是ios浏览器则进行90度旋转 重点来了: 必须确保检测的图片是ios设备上传的完整图片,不要在前端压缩过的,因为压缩后的图 ...
 - iOS图片上传后被旋转的问题
		
最近用PHP做了一个图片合成程序,前端是通过HTML的file input选取自定图片,POST到php后台调整尺寸后与事先准备好的背景图进行合成. 通过测试发现,上传后的自定图片有的被旋转了,有的是 ...
 - webAPP如何实现移动端拍照上传(Vue组件示例)?
		
摘要:使用HTML5编写移动Web应用,主要是为了尝试一下“一套代码多处运行”,一个webapp几乎可以不加修改的运行在PC/Android/iOS等上面运行.但是写到现在觉得虽然这种方式弊大于利,不 ...
 - 利用exif.js解决ios手机上传竖拍照片旋转90度问题
		
html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题:Android手机没这个问题. 因此解决这个问题的思路是:获取到照片拍摄的方向角,对非 ...
 - html5调用手机摄像头,实现拍照上传功能
		
今天做手机网站,想实现手机扫描二维码功能.首先实现在浏览器中调用手机摄像头,实现拍照功能并且把拍下的照片显示在页面并上传到服务器上,然后再在服务器端进行分析. 首先实现在浏览器中调用摄像头,当然用现在 ...
 - 修正ios h5上传图时的图片方向问题
		
.ios上传会在exif中带一个 Orientation的属性,这个属性在windows中不会生效,在ios浏览器中会生效,造成图片在windows资源管理器中与ios浏览器中方向不一致 为了用户 ...
 - Android4.4 + WebAPI 实现拍照上传
		
网上有很多关于拍照上传的实现方法,如果用新版本android去运行有可能会发现根本实现不了.主要原因是android从4.4版本开始通过intent.ACTION_GET_CONTENT打开选择器后, ...
 - php实现手机拍照上传头像功能
		
现在手机拍照很火,那么如何使用手机拍照并上传头像呢?原因很简单,就是数据传递,首先手机传递照片信息,这个就不是post传递 也不是get函数传递, 这个另外一种数据格式传递,使用的是$GLOBALS ...
 
随机推荐
- selenium启动firefox时加载扩展
			
有些时候,我们测试需要用到插件或者已经导入的证书(比如金融和安全加密行业),而selenium启动firefox时会打开一个新的,不含有任何插件和个人证书的firefox(等同于全新安装后第一次打开的 ...
 - servlet的开发流程介绍
			
servlet的开发部署流程 1.在%TOMCAT_HOME%/webapps下WEB-INF的文件夹,写一个文件web.xml(该网站的配置信息),建立一个classes的子文件夹,也可以从别的目录 ...
 - asp.net  mvc4 使用  System.Web.Optimization 对javascript和style的引入、代码合并和压缩的优化(ScriptBundle,StyleBundle,Bundling and Minification )
			
Bundling and Minification两个单词对今天的内容有个比较好的总结. 问题所在 一. 在asp.net包括mvc项目中,引入js和css也许有人认为是个很容易和很简单操作的事情,v ...
 - 编写高性能Javascript代码的若干建议
			
多年来,Javascript一直在web应用开发中占据重要的地位,但是很多开发者往往忽视一些性能方面的知识,特别是随着计算机硬件的不断升级,开发者越发觉得Javascript性能优化的好不好对网页的执 ...
 - Rainyday.js – 使用 JavaScript 实现雨滴效果
			
Rainyday.js 背后的想法是创建一个 JavaScript 库,利用 HTML5 Canvas 渲染一个雨滴落在玻璃表面的动画.Rainyday.js 有功能可扩展的 API,例如碰撞检测和易 ...
 - Tomcat部署记事
			
1.导入证书到jdk里 keytool -import -alias 证书名称 -file 证书地址 -keystore 导入位置 例:keytool -import -alias co3 -file ...
 - ionic + cordova 配置和开发过程中的一些问题
			
1.Android sdk:ERROR: SWT folder '' does not exist.问题 在win x86系统中,如果运行Android的 sdk manager,会出现Android ...
 - [SharePoint] SharePoint 错误集 3
			
阅读目录 1. workflow 流程走不下去,报 workflow fails to run 的错误 2. 安装sharepoint prerequisit总是在web server (iis)这步 ...
 - 操作系统开发系列—12.e.Makefile
			
先来看一个简单的Makefile,我们把它放在目录/boot下,可以用来编译boot.bin和loader.bin. # Makefile for boot # Programs, flags, et ...
 - 两个Service之间相互监视的实现
			
在实际开发中可能需要用到两个Service相互监视的情况,本示例就是实现此功能以作参考. 服务A: public class ServiceA extends Service { private st ...