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

最新推荐文章于 2025-08-14 21:18:45 发布

原创

最新推荐文章于 2025-08-14 21:18:45 发布 · 7.5w 阅读

46 ·

CC 4.0 BY-SA版权

文章标签：

#exif.js #图片旋转 #图片压缩

html5+canvas进行移动端手机照片上传时，发现ios手机上传竖拍照片会逆时针旋转90度，横拍照片无此问题；Android手机没这个问题。

因此解决这个问题的思路是：获取到照片拍摄的方向角，对非横拍的ios照片进行角度旋转修正。

利用exif.js读取照片的拍摄信息，详见 http://code.ciaoca.com/javascript/exif-js/

这里主要用到Orientation属性。

Orientation属性说明如下：

旋转角度	参数
0°	1
顺时针

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

ZeekerLin

关注关注

12
点赞
踩
46

收藏

觉得还不错? 一键收藏
15
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

antd-mobile 移动端使用input调用摄像头拍摄图片反显时图片旋转问题

small_fox_dtt的博客

06-16

1608

需要实现的页面效果：点击头像进行图片上传；再次点击可以修改遇到的问题：上传图片反显到框里面图片旋转最终解决方案： <div style={{padding:'10px 0'}}> <span className={s.fileStyle}> <img src={this.state.imgSrc} alt="" className={s.imgs} id

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

肖肖肖丽珠的博客

04-13

4434

移动端手机照片上传时，发现iOS手机上传竖拍照片会逆时针旋转90度，横拍照片无此问题；Android手机没这个问题。因此解决这个问题的思路是：获取到照片拍摄的方向角，对非横拍的ios照片进行角度旋转修正。 Exif.js 提供了 JavaScript 读取图像的原始数据的功能扩展，例如：拍照方向、相机设备型号、拍摄时间、ISO 感光度、GPS 地理位置等数据。我们可以通过通过这个插件

15 条评论您还未登录，请先登录后发表或查看评论

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

10-21

主要介绍了详解利用exif.js解决ios手机上传竖拍照片旋转90度问题，有需要的朋友可以了解一下。

Exif.js获取手机拍摄照片的经纬度

最新发布

LZUGIS

08-14

542

最近有个需求用户上传照片，并获取到照片拍摄时候的位置。网上搜索了相关资料，找到了Exif.js。本文就分享一下我的实验结果和实现。

exif.js 旋转图片

weixin_30333885的博客

01-22

355

还是那个问题：网上的大胸弟们BB一大堆，没几个给的代码能用的，话不多说，直接上demo：链接：https://pan.baidu.com/s/1jJ6vnt8 密码：swwm 不要忽视demo中的setTimeout，每个人的机子和浏览器的反应速度不同，而exif.js貌似又是异步型的，如果不用setTimeout，会导致在某些浏览器（PC或手机）不能旋转。我在demo设置的时间为1毫秒，这...

Exif.js图片旋转修正

极客神殿

08-13

1275

上传后图片旋转修正测试流程上传 -> base64展示 -> 获取旋转值 -> 修正 -> 修正后展示 -> 转换blob和file文件供其他功能调用 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name='viewport' content='width=device-width,initial-scale=1

使用exif.js修复iOS竖拍照片上传旋转问题

"本文主要介绍了如何使用exif.js来解决iOS手机在上传竖拍照片时出现的90度旋转问题。在HTML5结合canvas处理移动端照片上传的过程中，iOS设备的竖拍照片会自动逆时针旋转90度，而Android设备则没有此问题。为了解决这...

exif.js html图片旋转,解决图片显示 Exif.js更改图片的显示方向

weixin_33941859的博客

06-09

670

没什么文字直接上代码//这是一个解决exif更改脱方向的一个js文件// 应用前先npm install exif-js --save或者直接引入exif-js//// 调用方法// let baseData;// imgExif(file,function (base){// baseData=base// });import Exif from 'exif-js' //引入exiflet ...

通过exif.js简单处理手机照片拍摄图片旋转问题

weixin_48349367的博客

06-11

1747

在移动端拍照获取图片后，然后使用canvas压缩图片，有时我们会发现输出的图片是旋转过的。其实当我们旋转手机拍照的时候，就会产生一个角度问题，生成的图片都会有EXIF meta data。然后我们可以通过一个js插件[exif-js]来读取图片的EXIF meta data中的角度数值，再通过canvas对图片进行旋转处理，这样我们就可以输出正常角度的图片了。具体的EXIF meta data可以参考如下：http://www.impulseadventure.com/photo/exif-orient

利用exif.js解决IOS手机H5页面拍照上传照片旋转90度问题

02-26

利用exif.js解决IOS手机H5页面拍照上传照片旋转90度问题: upLoadPic($inputBorn, $inpOutBorn, 1); 其中$inputBorn为type="file"的input, $inpOutBorn为展示图片用的盒子,盒子要给宽高,默认的情况下,图片是以背景图片展示的.如果需要更改展示方式可以在upLoadPic()函数中进行修改

exif.js html图片旋转,exif.js 实现图片旋转到正常

weixin_39783512的博客

06-09

325

下载exif.jsnpm install exif-js --save引入exif.jsimportEXIFfrom'src/utils/exif-js';//旋转图片到正常const _rotateImg = (imgFile) => {return new Promise((resolve, reject) => {EXIF.getData(imgFile, function...

exif.js html图片旋转,exif获取图片旋转角度

weixin_28702105的博客

06-09

336

任何旋转，都可以用一个旋转轴ωCGAffineTransform_trans=sticker.transform;CGFloatrotate=acosf(_trans.a);...引入下方的jquery.rotate.js文件，然后通过$("选择器").rotate(角度);可以旋转任意角度，例如$("#rotate-p_w_picpath&quot.edu ul li img...

解决某些机型图片旋转（exif.js ）

qq_42076140的博客

10-14

419

安装 NPM: npm install exif-js --save Bower: bower install exif-js --save 引用 import EXIF from 'exif-js'; 封装 const _rotateImg = (imgFile) => { return new Promise((resolve, reject) => { EXIF.getData(imgFile, function () {

exif.js解决ios手机上传照片后显示为旋转90度问题（兼容ios13.4之前的版本）

細水、長流√的专栏

03-03

1179

然而我发现大家好像都默认浏览器不会对带 EXIF 信息的图片进行回正，当然之前确实不会。但是自从 iOS 更新到 13.4.1 后，浏览器支持自动回正了。在做手机移动端app时，发现iOS12.5.1版本（iphone6）上传照片出现顺时针旋转90问题，iphone11倒是正常，最后发现。2.在对应的vue模块引入：import EXIF from “exif-js”;利用exif.js读取照片的拍摄信息。

前端解决图片旋转时遇到的问题记录

qq_37647702的博客

05-07

1049

bug 手机上传图片到服务器，有的电脑浏览器显示的图片会出现图片旋转问题。思路一（错误）：由于是在显示的时候发现的bug，所以，一开始，是在显示的时候进行的处理。百度到了许多原因。然后找到了以下处理方案。经过测试，发现原本 " orientation=6 " 能够正常显示的全部旋转了90°......  <script src="https://cdn.jsdelivr.net/npm/exif-js" charset=

前端有趣小案例-旋转相册前端H5，以原生JS实现-移动端带自定义图片功能的旋转相册

qq_52782570的博客

08-23

1106

照片来实现。

exif.js解决ios手机上传照片后显示为旋转90度问题

n1234567896的博客

06-14

997

然而我发现大家好像都默认浏览器不会对带 EXIF 信息的图片进行回正，当然之前确实不会。但是自从 iOS 更新到 13.4.1 后，浏览器支持自动回正了。在做手机移动端app时，发现iOS12.5.1版本（iphone6）上传照片出现顺时针旋转90问题，iphone11倒是正常，最后发现。转载于：https://blog.csdn.net/a460550542/article/details/129320703。2.在对应的vue模块引入：import EXIF from “exif-js”;