html 里img图片被自动旋转,关于HTML5显示图片翻转90度的问题

首先，看到标题就觉得这个问题有点看不懂吧。咱遇到问题，那就解决问题。下面就具体描述一下遇到的情况。

上传作品后，需要作品的详情展示，然后在预览页面，出现某些图片与上传的图片展示不一致的效果。下面是原图与展示图的对比。

很明显可以图片发生了一个-90度的旋转。这是由于什么原因造成的呢？

首先，我查了一些资料，得知由于图片元数据造成的兼容性问题。

ios手机上传竖拍照片会逆时针旋转90度，横拍照片无此问题；Android手机没这个问题

造成该问题的属性就是

Orientation拍摄方向

在网上找到一个比较好用的插件来获取元数据的属性。

Exif.js 提供了 JavaScript 读取图像的原始数据的功能扩展，例如：拍照方向、相机设备型号、拍摄时间、ISO 感光度、GPS 地理位置等数据。

⚠️注意事项：

EXIF 数据主要来自拍摄的照片，多用于移动端开发，PC 端也会用到，此插件兼容主流浏览器，IE10 以下不支持。

该属性的值一般有哪些呢？

属性值

型号

旋转角度

一般手机型号

0°

iOS手机

-90°

三星手机

90°

暂无

180°

找到原因后，就开始解决问题了。

// main.js npm install exif-js

import EXIF from 'exif-js';

Vue.prototype.EXIF = EXIF;

imgOnload(path, e) { // 在图片标签上加一个load 事件

const img = e.currentTarget;

const _this = this;

const imageObj = new Image();

imageObj.src = path; // path代表文件的路径

EXIF.getData(imageObj, function(){

EXIF.getAllTags(this); // 获取所有属性

const Orientation = EXIF.getTag(this, 'Orientation'); // 获取该Orientation属性

if (Orientation == 6) { // 旋转90

// 其中img是代表当前图片展示的img标签，我是直接让他的父元素进行的旋转加平移，并且设置了高度。

img.parentNode.style = `transform: rotate(90deg) translateY(${Math.abs(img.width - img.height) / 2}px); height: 860px`;

} else if (Orientation == 8) { // 旋转-90

img.parentNode.style = `transform: rotate(-90deg) translateY(${Math.abs(img.width - img.height) / 2}px); height: 860px`;

}

...

});

}

复制代码

由此，旋转的图片得以正常的加载。

html 里img图片被自动旋转,关于HTML5显示图片翻转90度的问题相关推荐

html如何图片立体自动旋转,css3如何让图片不停旋转？
本篇文章将要给大家详细介绍如何使用css3让图片实现不停旋转的效果,我们在进行网页页面设计时,经常会遇到各种关于图片展示的问题,比如有的需要让图片圆角展示.图片点击放大展示等等效果. 下面主要就给大家 ...
【Android RTMP】NV21 图像旋转处理 ( 图像旋转算法 | 后置摄像头顺时针旋转 90 度 | 前置摄像头顺时针旋转 90 度 )
文章目录安卓直播推流专栏博客总结一. 后置摄像头顺时针旋转 90 度二. 前置摄像头顺时针旋转 90 度三. NV21 格式图像旋转代码安卓直播推流专栏博客总结 Android RTMP 直 ...
【Android RTMP】NV21 图像旋转处理 ( 问题描述 | 图像顺时针旋转 90 度方案 | YUV 图像旋转细节 | 手机屏幕旋转方向 )
文章目录安卓直播推流专栏博客总结一. NV21 图像格式与 Camera图像传感器方向问题二. NV21 图像格式视频旋转 1. 图像旋转问题及解决方案 ( 顺时针旋转 90 度 ) 2. NV ...
python将图片转换为Framebuffer裸数据格式(终端显示图片)
要在ubuntu终端显示图片或者在板子的LCD显示图片,Framebuffer是一个简单易用的接口,直接写入像素信息即可. 但普通的图片带有头部信息或者编码格式不同,直接送入Framebuffer是显 ...
富文本编辑的图片在手机，移动端显示图片img太大，超出屏幕，出现滚动条，富文本中的图片如何修改样式
富文本编辑的图片在手机,移动端显示图片太大,超出屏幕,出现滚动条,富文本中的图片如何修改样式 var html = res.data.details.replace(/<img([\s\w&qu ...
[ios开发]锁屏后的相机的方向检查，与图片的自动旋转
关键词:imageOrientation, 自动旋转, 获取方向, 锁屏, 图片方向, 自定义拍照问题描述: 一个同事开发iphone拍照后为图片添加滤镜的功能. 发现添加滤镜时总出现方向自动变化的 ...
html如何图片立体自动旋转,html中如何让图片翻转
前言上个帖子<html如何给图片添加动态的文字说明>分享了如何给图片添加动态的文字说明,今天想给大家分享一下,如何给图片添加翻面的文字说明效果.也就是实现鼠标移入图片时,图片会反转过来, ...
android禁止屏幕自动旋转_如何禁止屏幕翻转
Android 版需要修改 AndroidManifest.xml 文件,在文件中找到 android:screenOrientation 属性,原值应该是 user,修改成 portrait 就是锁 ...
选择相册图片上传后，客户端显示图片却是被旋转过角度
我想某位大哥也遇到过这个问题,就是手机相册选择图片时,显示是正的(未被旋转角度的),但是上传该图片后,客户端却显示被旋转了xx度的.那这肯定是客户不想出现的问题,同样也是我们开发者不想出现bug.我想 ...

html 里img图片被自动旋转,关于HTML5显示图片翻转90度的问题

html 里img图片被自动旋转,关于HTML5显示图片翻转90度的问题相关推荐

最新文章

热门文章