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 中看到的如下图

AXIHE / 精选教程

浏览全部教程

HTML

CSS

JS

关于朱安邦

我叫 朱安邦,阿西河的站长,在杭州。

以前是一名平面设计师,后来开始接接触前端开发,主要研究前端技术中的JS方向。

业余时间我喜欢分享和交流自己的技术,欢迎大家关注我的 Bilibili 和抖音。

关注我: Github / 知乎

如果你加我的私人微信,麻烦写上您的 称呼,所在地区,职业,方便我备注,谢谢


本站的微信公众号

阿西河前端教程

Anbang

安邦的私人微信

微信号: yaolushan

Anbang

Bilibili(B站)

朱安邦

Anbang

抖音号

抖音号: axihe

Anbang