ios或者 Android H5页面展示照片 会有90度或者180度旋转的问题

使用阿里云的一个获取图信息的接口获取图片属性信息,查看orientation属性值,根据值判断是否旋转,并做样式调整
https://help.aliyun.com/document_detail/44975.html?spm=a2c4g.11186623.6.1301.5a15ced2P6oKBm
因为想的是重新操作DOM 所以方法在 beforeUpdate中调用了,
因为要循环图片数组,查看符合条件的图片,又得请求数据查看图片属性
用到了递归

getImgOrientation:{
if(this.index>=this.datas.infoList.length){
        return;
      }
          this.$http({
            methods: "GET",
            url:url
          }).then(res=>{
            if (res.body.Orientation.value === "6") { //顺时针旋转90度(改变逆时针转回去)

                } else if (res.body.Orientation.value === "8") {//逆时针旋转90度(改变顺时针转回去)

                } else if (res.body.Orientation.value === "3") { //旋转180度
                   
                } else if (res.body.Orientation.value === "1") { //没旋转
                }
             this.index++;
             this.getImgOrientation()
          }) .catch(() => {
             this.index++;
             this.getImgOrientation();
             console.warn('获取失败');
            });
}

因为安卓和ios显示效果不同,所以也可以加个客户端判断

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值