img标签加载src图片，图片逆时针旋转了90度，解决方案

问题描述：

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

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

原因分析：

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

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

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

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

//get original photo from iOS photos
//如果该图片大于2M，会自动旋转90度；否则不旋转
UIImage* originalImg=[dict objectForKey:UIImagePickerControllerOriginalImage];

原文：https://blog.csdn.net/hitwhylz/article/details/39518463

解决方法：

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 = CGAffineTransformIdentityswitch (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)

img标签加载src图片，图片逆时针旋转了90度，解决方案相关推荐

关于Android 竖屏录制，在PC端播放被逆时针旋转了90度
更新: 事实上这是视频播放器的原因,使用自带播放器,win7上H264会被逆时针旋转90度,而win10上MPEG_4_SP会被逆时针旋转90度. 使用MediaRecorder录制视频,发现在PC端 ...
img标签图片加载失败显示图片
img标签图片加载失败显示图片 onerror="οnerrοr=null;src='../../image/community/initialize_img.png'"
Picturefill.WP – 根据屏幕尺寸加载合适的图片
Picturefill.WP插件利用picturefill.js脚本展示Responsive图片,即根据视口宽度选择尺寸合适的图片加载,节省带宽,提高网站载入速度.例如用户用手机访问站点,该插件会选择 ...
ios wkweb设置图片_ios·WKWebView\UIWebView加载HTMLString,实现图片懒加载
背景: 项目中开发商品类型数据,数据可变性较大,所以商品详情数据存在文案和图片富文本显示,后台返回了html格式的数据供前端展示. 如果用webView直接显示的话,需要等html内容完全展示才能获取 ...
htmlimg图片加载失败_img图片不存在显示默认图
在项目中,我们使用img标签加载图片,有时候图片地址有可能失效,获取路径问题,导致图片加载失败,img标签就会显示alt内容.这时候用户体验不是很好,所以就需要显示一张默认图片. 第一种方式:使用jq ...
小程序一次性上传多个本地图片，上拉加载照片以及图片加载延迟解决之道
一:小程序之一次性上传多个本地相片最近由于项目需要所以学了下小程序,也做了一些东西,随后便有了以下的一些总结了,现在说说如何使用小程序一次性上传多个本地相片. 问题描述最近做项目的时候要实现一个上 ...
Android加载/处理超大图片神器！SubsamplingScaleImageView(subsampling-scale-image-view)【系列1】...
Android加载/处理超大图片神器!SubsamplingScaleImageView(subsampling-scale-image-view)[系列1] Android在加载或者处理超大巨 ...
https访问http加载不出图片_前端解决第三方图片防盗链的办法
作者:biaochenxuying 转发链接:https://github.com/biaochenxuying/blog/issues/31 问题笔者网站的图片都是上传到第三方网站上的,比如简书 ...
jquery 当页面图片加载之后_图片的懒加载和预加载
一.懒加载 [1.1]什么是懒加载? 懒加载也就是延迟加载,指的是在长网页中延迟加载图像,是一种很好优化网页性能的方式.当访问一个页面的时候,先把img元素或是其他元素的背景图片路径替换成一张大小为1 ...

img标签加载src图片，图片逆时针旋转了90度，解决方案

img标签加载src图片，图片逆时针旋转了90度，解决方案相关推荐

最新文章

热门文章