h5 ios 拍照翻转问题

原创于 2019-11-29 19:47:37 发布 · 921 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#uni-app #h5 ios #图片翻转

vue 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了解决iOS系统下图片旋转问题的两种方法：一是利用exif-js库进行处理，二是通过判断平台为iOS时，使用CSS对图片进行旋转。以uni-app为例，展示了如何根据不同平台动态调整图片显示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.方法一使用 exif-js 解决

2.方法二简短粗暴式判断当前系统是否为ios，对图片进行旋转

以混合框架uni-app为例

//判断平台
this.platform = uni.getSystemInfoSync().platform

<view class="img">
   <image :class="platform == 'ios' ? 'trans' : 'upload'"  :src="formData.facePic"/> 
</view>

.img {
   flex: 0 50%;
   height: 100%;
   overflow: hidden;
   box-sizing: border-box;
 }
.upload {
   width: 100%;
   height: 245px;
   box-sizing: border-box;
 }

.trans {
    width: 245px;
    height: 100%;
    box-sizing: border-box;
    transform: rotate(90deg);
    transform-origin: center;
    position: relative;
    left: -2px;
 }