zoukankan      html  css  js  c++  java
  • H5手机端开发问题及解决方案

    ios竖屏拍照上传,图片被旋转问题

    1.通过第三方插件exif-js获取到图片的方向
    2.new一个FileReader对象,加载读取上传的图片
    3.在fileReader的onload函数中,得到的图片文件用一个Image对象接收
    4.在image的onload函数中,利用步骤1中获取到的方向orientation,通过canvas旋转校正,重新绘制一张新图
    注意iPhone有3个拍照方向需要处理,横屏拍摄,home键在左侧,竖屏拍摄,home建上下
    5.将绘制的新图转成Blob对象,添加到FormData对象中,然后进行校正后的上传操作

    iPhoneX适配

    // 1.viewport meta 标签增加属性viewport-fit=cover
    <meta name="viewport" content="width=device-width, viewport-fit=cover, xxxx">
    // 2.body元素增加样式
    body {
      padding-bottom: constant(safe-area-inset-bottom);
      padding-bottom: env(safe-area-inset-bottom);
    }
    // 3.如有fixed底部的元素,也增加上面样式
    xxx {
      padding-bottom: constant(safe-area-inset-bottom);
      padding-bottom: env(safe-area-inset-bottom);
      background-color: #fff; // 记得添加background-color,不然会出现透明镂空的情况
    }

  • 相关阅读:
    1025 反转链表
    Vue--修饰符
    Vue--watch
    Vue--防止页面闪烁
    Vue--过滤器
    Vue--自定义指令
    Vue--生命周期
    vue--父子组件传递数据
    vue--父子组件调用彼此的方法
    Celery--beat
  • 原文地址:https://www.cnblogs.com/liuzhenwei/p/8691804.html
Copyright © 2011-2022 走看看