服务器图片默认显示图片,图片上传服务器后被自动旋转

关键词：图片旋转，EXIF，前端

原文：http://makaiqian.com/exif-orientation/

前端上传图像到后台时，有时候会发现图像旋转了。比如这张图：

后台服务器显示情况

但在我的电脑上预览和显示是这样子的：

本地显示是这样子

一开始以为是前端代码的问题，其实并不是。这里要引入 EXIF的概念。

EXIF

EXIF(Exchangeable Image File)是“可交换图像文件”的缩写，当中包含了专门为数码相机的照片而定制的元数据，可以记录数码照片的拍摄参数、缩略图及其他属性信息。

图像一旦被修改，Exif 信息可能会永久丢失，故编辑 Exif 必须使用专门的软件。

可以理解成，用来记录照片属性和拍摄数据的。(可以附加于jpeg等文件中，但png图片中不会有。)

EXIF中，有一个 Orientation 参数，用于记录照片生成时的方向。一共有8个值，分别是：1、2、3、4、5、6、7、8。

正常情况下，拍照只会出现是1、6、3、8这几个值。2、5、4、7相当于镜像，照像时不会出现这几种情况。1、6、3、8的效果分别是：

1：0度(比如正常情况下我是这样拍摄的)

拍摄角度

6：逆时针90度回到正常

旋转回正常角度

3: 180度回到正常

顺/逆时针180都能回到正常

8：顺时针90度回到正常

顺时针90度回到正常

Mac上为什么会是正常的呢？

Mac之所以会显示正常，是因为Mac的图片“预览”功能会自动根据Orientation参数处理照片方向。但实际上，照片是旋转的。

用Mac的预览的工具 - 显示检查器查看旋转信息：

Preview 查看旋转信息

这里可以看到方向是6(逆时针旋转90度将回到正常).

顺带说一下，可以看到好多EXIF参数信息(我是用pad拍的)：

图像EXIF信息

Windows平台上呢？

windows上默认的图片预览工具没有做处理，如果拍摄的时候是旋转的，那显示的也是旋转的。

在Mac上怎么转回来？

用Mac的“预览”功能打开，再Command + S保存，参数就改变了，上传的图片就正了。

Orientation参数就从6(逆时针旋转90度回到正常)变为了1(正常)

利用专业的修改EXIF的工具

关于前端获取EXIF

服务器图片默认显示图片,图片上传服务器后被自动旋转相关推荐

网站文件上传到服务器怎么不显示,我已经上传文件，为什么还看不到网站首页？...
首页 > 虚拟主机 > 已经上传文件还看不到网站我已经上传文件,为什么还看不到网站首页? 有时候主机用户已经上传了网页文件,但是访问域名的时候,还是看不到他的网站.可能看到的是类似这样的 ...
android通讯录上传服务器,Android 实现读取通讯录并上传服务器
关键技术 - 内容解析者Resolver - ListView - Socket网络编程权限申请 //需要在Manifest.xml文件中申请权限布局: xmlns:app="http: ...
ios java 图片上传到服务器,iOS 图片上传服务器
最近搞图片上传,折腾了一个星期终于做出来了,网上搜出来的方法几乎都是好几年前的,试了好多都不能用,此次把代码公布出来供大家参考. 注:部分代码是后台写的,此方法没用到第三方库. 1.图片保存到本地同时 ...
java下传图片到tomcat服务器后,如何在页面显示,java图片上传服务器及客户端显示图片...
我在上一篇文章SSM+Layui实现文件上传服务器中展示了如何将图片上传至服务器,保存到SQL server数据库中,本篇文章主要讲的是将图片上传到服务器上,保存在服务器的磁盘上,然后将图片路径保存到 ...
百度ueditor富文本--图片保存路径的配置以及上传到远程服务器
我们在上篇文章中学习了上传图片的配置: 百度ueditor富文本--配置图片上传在文章的最后讲到 ueditor 默认设置的保存图片的路径是相对路径,项目相关的. 保存的图片会放在to ...
ufserver文件上传服务器-用来管理你项目中的图片-性能可比Java、Python高十倍不止
大家在做项目的时候如果是web项目,项目又不大的情况下上传图片一般都是上传到项目的webapp目录下面,webapp下面会有一个upload的文件夹,今天给大家分享的是在项目中如何把图片上传到其他服务 ...
配置typora图片上传服务器
配置typora图片上传服务器 windows下第一种方案简单配置(纯图形操作,如果有代码基础推荐直接看第二种) 下载最新版本的typora,安装好后,在左侧打开设置设置里打开图像,选择上传图片 ...
Vue Element UI 之富文本图片上传服务器 + 图片地址插入富文本
该案例的情况 vue版本:vue cli3 插件:vue-quill-editor vue-quill-editor的增强模块:quill-image-extend-module quill-imag ...
html结构转图片上传服务器并实现点击复制图片到剪贴板
html结构转图片上传服务器并实现点击复制图片到剪贴板总结主要实现了将前端页面上某区域的页面html结构通过html2canvas插件转换成canvas对象,通过canvas对象的toDataUR ...
# iOS 相册图片多选以及类似微信获取相册图片并使用AFN框架上传至服务器
iOS 相册图片多选以及类似微信获取相册图片并使用AFN框架上传至服务器做APP基本上都是需要从系统的相册当中获取一张或多张图片.那怎么做呢?下面我就带你来实现这个内容,第一次写. 我只是记录一下. ...

服务器图片默认显示图片,图片上传服务器后被自动旋转

服务器图片默认显示图片,图片上传服务器后被自动旋转相关推荐

最新文章

热门文章