阿西河

所有教程

公众号
🌙
阿西河前端的公众号

我的收藏

    最近访问  (文章)

      教程列表

      抓包专区
      测试专区

      iphone-IOS 竖直拍照被旋转,image-orientation 让图片自动旋转

      IOS 垂直拍照的时候会遇到,PC 端读取的时候,逆时针旋转了 90 度的问题;

      安卓、PS 处理的,相册选择截图等不会出现这个问题;

      场景说明:

      比如原图是:https://zhubangbang.com/ssl/demo-img/transform-origin-demo.jpg

      这个图片在浏览器里,如果您单独打开的时候,是垂直显示的;

      但是包裹在 IMG 标签内就会逆时针旋转了;

      如上图;

      这种情况下,因为 window 系统看图不支持方向自动识别,所以看到的还是正常垂直的;

      在微信中,看到的也是没问题的(手机中用 lrz 处理过)

      原理分析:

      可以通过exif-js这个插件来获取图片信息;

      GitHub 地址:https://github.com/exif-js/exif-js

      API 文档:http://code.ciaoca.com/javascript/exif-js/

      $fileImg.load(function(){
          // console.log("加载完成!");
          var Orientation;
          EXIF.getData($fileImg[0], function() {
              Orientation = EXIF.getTag(this, "Orientation");
              console.log("拍照Orientation值是:",Orientation);
              if(Orientation===6){//
                  // console.log("这张图片是IOS垂直拍的");
                  //image-orientation: from-image
                  $fileImg.css({"image-orientation":"from-image"});
              }
          });
      
      });
      

      注意“Orientation”这个属性,IOS 垂直拍出来的照片,Orientation是 6;安卓手机拍出来是 1;PS 截图等处理后的照片会自动舍弃该属性,如果您获取的话,会是undefined

      可以通过 CSS 来解决;

      比如火狐浏览器有一个新属性的:image-orientation

      可通过 CanIuse 来看兼容性:http://caniuse.com/#feat=css-image-orientation

      可以通过设置:image-orientation: from-image;这个属性让图片正常显示;

      但是 Chrome 等浏览器并不支持;

      Mozilla 官网的介绍:https://developer.mozilla.org/zh-CN/docs/Web/CSS/image-orientation

      网上了下,也有类似的问题:https://stackoverflow.com/questions/24658365/img-tag-displays-wrong-orientation

      DEMO:http://jsfiddle.net/7j5xJ/

      国内的相关文章:http://www.jianshu.com/p/ad4501db178e

      最终我的处理方式

      $fileImg.load(function(){
          // console.log("加载完成!");
          var Orientation;
          EXIF.getData($fileImg[0], function() {
              Orientation = EXIF.getTag(this, "Orientation");
              // console.log("拍照Orientation值是:",Orientation);
              if(Orientation===6){
                  // console.log("这张图片是IOS垂直拍的");
                  //image-orientation: from-image;
                  // $fileImg.css({"image-orientation":"from-image"});
                  $fileImg.css({
                      "transform":"rotate(90deg)",
                      "transform-origin":"0 0",
                      "marginLeft":"270px",
                      "paddingBottom":"80px",
                      "height":"auto",
                      "width":"360px"
                  });
              }
          });
      
      });
      

      因为image-orientation 这个属性就火狐和safari支持,主流chrome也不支持,所以就彻底不用这个属性;

      通过变换角度并想右移动图片的 HTML 中高度;

      因为上面和下面可能会有文字,所以通过padding-bottom微调下;

      注意这种情况下,不能设置max-width 这个属性;

      PC 中看到的如下图

      卖前端学习教程

      只需几十元,就能买到培训班的内部教程!开启高薪之路!

      零基础小白阿里P7的教程都有!

      同时长期收购所有培训班的前端教程

      目录
      本文目录
      目录