iOS拍照之后图片自动旋转90度解决办法

移动端h5页面拍照上传图片的时候图片旋转问题 0. 问题描述 在项目中有个图片上传的组件(vue项目) <input ref="input" type="file" multiple="false" accept="image/*" @change="handleChange"> 在ios中点击的时候会有一个拍照的选项,但是!!!拍照的时候手机拿的方向不同,上传的图片会出现不同角度的旋转,具体现象如... 阅读详情

今天开发一个拍照获取照片的功能的时候, 发现上传之后图片会自动旋转90.

测试发现, 只要是图片大于2M, 系统就会自动翻转照片


  相机拍照后直接取出来的UIimage(用UIImagePickerControllerOriginalImage取出),它本身的imageOrientation属性是3,即UIImageOrientationRight。如果这个图片直接使用则没事,但是如果对它进行裁剪、缩放等操作后,它的这个imageOrientation属性会变成0。此时这张图片用在别的地方就会发生旋转。imageOrientation是只读的,不能直接修改其值。


解决方法如下:

1. 设置相机的一个属性allowsEditing为YES,设了这个值,你拍完照片后会在照片上出现一个框框,这就是对照片的裁剪编辑。在相机的代理方法中取照片的时候就别用UIImagePickerControllerOriginalImage来取了,要用UIImagePickerControllerEditedImage。用这个key取出来的照片,它的imageOrientation是0,所以之后的任何裁剪、缩放操作都不会造成旋转。这是第一种方法。


2. 第一种解决方法基本没用, 开发中基本都会对图片进行裁剪和压缩. 这里有一个专门针对这个事的很好的category

+ (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) {

        caseUIImageOrientationDown:

        caseUIImageOrientationDownMirrored:

            transform = CGAffineTransformTranslate(transform, aImage.size.width, aImage.size.height);

            transform = CGAffineTransformRotate(transform, M_PI);

            break;

            

        caseUIImageOrientationLeft:

        caseUIImageOrientationLeftMirrored:

            transform = CGAffineTransformTranslate(transform, aImage.size.width,0);

            transform = CGAffineTransformRotate(transform, M_PI_2);

            break;

            

        caseUIImageOrientationRight:

        caseUIImageOrientationRightMirrored:

            transform = CGAffineTransformTranslate(transform, 0, aImage.size.height);

            transform = CGAffineTransformRotate(transform, -M_PI_2);

            break;

        default:

            break;

    }

    

    switch (aImage.imageOrientation) {

        caseUIImageOrientationUpMirrored:

        caseUIImageOrientationDownMirrored:

            transform = CGAffineTransformTranslate(transform, aImage.size.width,0);

            transform = CGAffineTransformScale(transform, -1, 1);

            break;

            

        caseUIImageOrientationLeftMirrored:

        caseUIImageOrientationRightMirrored:

            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) {

        caseUIImageOrientationLeft:

        caseUIImageOrientationLeftMirrored:

        caseUIImageOrientationRight:

        caseUIImageOrientationRightMirrored:

            // 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 = [UIImageimageWithCGImage:cgimg];

    CGContextRelease(ctx);

    CGImageRelease(cgimg);

    return img;

}

vue项目el-upload移动端ios手机拍照上传相册旋转90度的问题修复 vue项目兼容移动端,上传图片用到的是element的el-upload组件,ios手机端使用的时候,拍照上传照片会出现旋转90度的问题,以下为解决方案 需要在el-upload组件的beforePicUpload的方法中对ios拍照上传的图片进行处理 ①,需要用到exif-js插件进行照片的处理: npm install exif-js --save ②新建... 阅读详情

相关推荐

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

html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题;Android手机没这个问题。 因此解决这个问题的思路是:获取到照片拍摄的方向角,对非横拍的ios照片进行角度旋转修正。 利用exif.js读取照片的拍摄信息,详见  http://code.ciaoca.com/javascript/exif-js/ 这里主要用到Orienta

技术学习与分享 7万+

iPhone上关于相机拍照的图片的imageOrientation的问题

转载自:http://www.cnblogs.com/jiangyazhou/archive/2012/03/22/2412343.html iPhone上关于相机拍照的图片的imageOrientation的问题 用相机拍摄出来的照片含有EXIF信息,UIImage的imageOrientation属性指的就是EXIF中的orientation信息。 如果我

ysysbaobei的专栏 1016

Matlab激活失败?手把手教你解决License checkout failed问题(附详细截图)

本文针对Matlab激活后出现“License checkout failed”错误的常见问题,提供了详细的解决方案。核心在于精准定位并正确填写Windows系统用户名,而非计算机名或账户全名。文章通过分步截图和命令指引,手把手教你使用`whoami`命令获取正确信息,并重新运行激活程序,从根本上解决因用户名填写错误导致的许可检查失败问题。

weixin_29062823的博客 570

拍照图片加入水印效果图片旋转了90度

前端时间项目中遇到在部分机型上拍照照片加上水印效果后,存储图片旋转了90度的问题。 解决这个问题需要用到android提供的ExifInterface。 ExifInterface是什么? ExifInterface是Android系统在2.0以后,媒体库加入操作图片Exif的类,Exif是可交换图像文件格式,是专门为数码相机的照片而设定的,可以记录数码照片的属性信息和拍摄数据。简单点说就是...

lijiang223的专栏 1487

STM32实战:如何快速移植野火PID调试助手协议到你的电机控制项目

本文详细解析了如何将野火PID调试助手协议快速移植到STM32电机控制项目中。通过深度剖析协议帧格式、数据解析逻辑及环形缓冲区应用,提供了从工程结构规划、核心函数适配到串口中断集成的完整移植步骤。文章还分享了协议健壮性增强、数据上报频率优化等高级调试技巧,帮助开发者构建稳定可靠的上位机调试通道,大幅提升PID参数整定效率。

weixin_29171129的博客 466

分享一些基于微信小程序开发的小游戏源码

小游戏小程序是运行在微信生态系统(或其他支持小程序的平台)中的轻量级应用程序,专为休闲游戏体验而设计的小程序子类别,小游戏小程序通常体积较小,加载速度快,用户无需等待长时间即可开始游戏。用户无需下载或安装单独的游戏应用程序,即可通过小程序入口直接进入游戏,同时小游戏小程序通常包含排行榜、分享功能等社交元素,可以增强游戏体验并促进用户参与。game.js:游戏页面的逻辑文件,包含页面数据、生命周期函数、事件处理函数等。game.wxml:游戏页面的结构文件,定义了页面的布局和组件。

xinshangdian的博客 6220

iOS开发技巧之:相机获取到的图片自动旋转90度解决办法

本文转载自这里:http://blog.youkuaiyun.com/hitwhylz/article/details/39518463 今天写demo的时候发现, 如果把通过相机获取到的图片,直接进行操作, 比如裁剪, 缩放, 则会把原图片向又旋转90度。 刚开始觉得莫名其妙, 不知所措。 后来百度了一下,找到了解决办法。 查找过程中, 碰到了一种说法: //get original pho

vkooy的博客 1171

秋叶ComfyUI-v10中文整合包:全中文AI绘画一键部署与实战指南

Stable Diffusion作为当前主流的扩散模型,通过去噪过程从随机噪声生成高质量图像,其开源特性推动了AI绘画技术的普及。然而,其官方WebUI在自定义工作流和可复现性上存在局限,而基于节点流程的ComfyUI则提供了更高的自由度和工程化控制能力,尤其适合复杂、可重复的创作流程。对于中文用户而言,英文界面和提示词输入是主要障碍。秋叶出品的ComfyUI-v10中文整合包,正是针对这一痛点,提供了**全中文界面**和**原生中文提示词支持**的解决方案。该整合包将Python环境、依赖库及常用插件预配

weixin_33895475的博客 398

ios手机上传竖拍照片旋转90度问题

ios手机及部分安卓手机上传竖拍图片旋转90度的问题@TOC 利用exif.js插件解决ios手机上传竖拍照片旋转90度问题 问题描述:移动端手机照片上传时,发现ios手机上传竖拍图片会逆时针旋转90度,横拍照片无此问题,部分安卓手机存在此问题。 解决思路 获取到照片拍摄的方向角,对非横排的ios照片进行角度旋转修正。 Exif.js提供了JavaScript读取图像的原始数据的功能扩展,例如:拍...

sinat_26432415的博客 2732

5分钟搞定:用Ollama在MacBook上本地运行Qwen3大模型(附避坑指南)

本文详细介绍了如何在MacBook上使用Ollama快速部署和运行Qwen3大模型,包括安装步骤、性能优化技巧及常见问题解决方案。Ollama作为一款轻量级工具,特别适合M系列芯片的Mac用户,支持多种量化版本,显著降低资源消耗,提升推理速度。

sql99的博客 821

【MediaPipe实战】从零构建实时人脸关键点检测与表情分析系统

本文详细介绍了如何使用MediaPipe框架从零构建实时人脸关键点检测与表情分析系统。通过Python代码实现,系统能够精准检测468个3D人脸关键点,并实时分析用户表情,适用于智能交互应用。文章包含环境配置、核心实现、可视化技巧及性能优化等实战内容,帮助开发者快速掌握深度学习在计算机视觉中的应用。

weixin_30836759的博客 72

解决ios图片拍照旋转90度问题,使用ImageCompressor图片压缩

在进行图片拍照上传功能时,由于现在手机像素越来越好,常常一张照片拍下来好几M,在上传时即拉长了上传时间,用户体验糟糕,又增加了服务器压力。除此之外,iphone手机竖直方向拍照还会存在图片自动旋转90度的问题。以为ic插件是比较好的解决办法。 首先引入ImageCompressor npm install image-compressor.js 使用时先引入 import Image...

林钹渊的博客 1433

游戏开发中的CV:实时动作捕捉与虚拟交互

游戏开发中的CV:实时动作捕捉与虚拟交互​ ,人工智能,计算机视觉,大模型,AI,在当今游戏产业中,玩家对游戏体验的要求日益提高,追求更加真实、沉浸的交互感受。计算机视觉(Computer Vision,CV)技术的飞速发展,为游戏开发带来了革命性的突破,其中实时动作捕捉与虚拟交互技术更是成为提升游戏品质的核心驱动力。

不踩坑,不知道坑有多深;不总结,踩过的坑白踩。 16万+

angular 图片裁剪cropperjs 应用及在iOS 图片旋转90度的问题并压缩图片

angular图片裁剪cropperjs应用 base64转图片 最近一个新的需求做一个angular项目中裁剪图片的需求,思路几乎为0,于是打开百度开始寻找支持的插件选择了cropperjs,至于为什么选择这个插件,(因为我哪知道哪个好,随便选一个呗),哈哈哈。给大家推荐个比较好的博客和git地址。 官网http://fengyuanchen.github.io/cropper/ 文档http...

lbchenxy的博客 1393

070、人脸AE实战:基于人脸检测的亮度优先与背光补偿算法

本文分享了基于人脸检测的亮度优先与背光补偿算法的实战经验。针对逆光自拍场景下人脸过曝问题,作者提出了动态平衡方案: 通过内缩20%的人脸核心区域提取亮度,避免背景干扰 创新性地采用"亮度差+置信度"的背光判定机制 设计动态权重分配策略,人脸权重可在30%-70%间调整 引入平滑处理防止亮度跳变,补偿增益限制在1.5倍以内 关键点在于:不是简单提亮人脸,而是通过分析人脸与背景亮度差,在80-110目标亮度范围内动态调整,实现自然的人脸曝光效果。算法已在实际项目中验证,解决了传统AE在逆光场景下的失效问题。

zzfmlxs的博客 31

怀旧版电脑GBC模拟器

再现原版GBC掌机的界面,电脑运行连游戏界面都一样大小,很怀旧,很真实,(英文版)强烈推荐,很小的文件,很难才找到的。

ios手机竖屏拍照图片旋转90°问题解决方法

手机拍照会给图片添加一个Orientaion信息(即拍照方向),如下: 用ios手机拍照,系统会给图片加上一个方向的属性, ios相机默认的拍照方向是后摄Home键在右为正,前摄Home键在左为正。 1代表正常的拍摄角度,ios横屏下拍摄、安卓机无论横屏竖屏拍摄,Orientaion的值都为1;但是ios竖屏拍摄,Orientaion的值为6,即竖着拍出的照片被添加了一个顺时 针旋...

weixin_34087307的博客 1267

LinePhone3.2.7(android端最新版本) sip客户端

SIP客户端For android:LinePhone3.2.7(最新版本),官网地址:http://www.linphone.org/

解决ios横屏拍照图片自动旋转90度问题

解决ios横屏拍照图片自动旋转90度问题

weixin_46246967的博客 1085

OV9734 DATASHEET,完整规格书

OV9734完整规格书,包括电气参数,尺寸规格,寄存器配置表等

iOS开发- 相机(摄像头)获取到的图片自动旋转90度解决办法

今天写demo的时候发现, 如果把通过相机获取到的图片,直接进行操作, 比如裁剪, 缩放, 则会把原图片向又旋转90度。 刚开始觉得莫名其妙, 不知所措。 后来百度了一下,找到了解决办法。 ps: 查找过程中, 碰到了一种说法: //get original photo from iOS photos //如果该图片大于2M,会自动旋转90度;否则不旋转 UIImage* orig

Dev_APP的专栏 1191

IOS开发 拍照上传图片旋转90°

//手机拍照如果大于2M的话上传会旋转90° //在上传之前调用下面的方法就行了 #pragma mark - 手机拍照大于2M手机照片会自动旋转90° - (UIImage *)fixOrientation:(UIImage *)aImage {          // No-op if the orientation is already correct  

卢梦如的博客 1926

H5调用相机拍照并压缩图片的方法(解决IOS拍照保存旋转90度问题)

最近在做H5调用相机拍照上传,发现IOS高版本型号拍照上传图像旋转了90,这里需要对苹果手机拍照的图像获取角度进行旋转后保存。 H5调用相机/相册 调用相机最简单的方法就是使用input file[camera]属性: <input type="file" capture=camera accept="image/*">//相机 <input type="file" accept="image/*">//相册 图片压缩分为图片大小压缩和质量压缩 图片大小压缩也就是分辨率压

cry_smile_hate的专栏 1640

android 读取的图片旋转90度_图片采集的方向问题

作者 |Seacen,目前在校生一枚,热衷于iOS开发,正在不断学习与探索当中。在平时喜欢运动、阅读、分享生活。刚开始使用AVFoundation进行采集的时候,经常会发现采集回来的图片方向不对。一般我们都是垂直(HOME键在底部)操作手机,但是在手机用相册或者在电脑上点开采集的图片时,都会发现图片逆时针旋转了90度。为了发现问题的所在,我们需要了解一下通常在图片采集中我们会遇到的各种...

weixin_30433439的博客 984

解决安卓机拍照,照片显示自动旋转90度问题

苹果手机拍照无异常,安卓手机拍照照片照片显示时会自动旋转90度显示

shushukaka的博客 4430
上一篇: 使用UIImagePickerController拍照和视频录制
下一篇: UIImage 读取修改像素颜色
直隶码农
博客等级 码龄19年 95粉丝 103原创
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值