php orientation生成图片,图片自动旋转的前端实现方案
随着智能手机的普及,大家已经习惯随手拍点照片传网上了。有时候传上去的照片方向会不对,甚至还有脑袋朝下的情况。为此,各大微博不约而同的给照片增加左右旋转的功能。这样能解决问题,但我们是否能更进一步,自动选择正确的照片方向呢?刚好最近我们有类似的场景,本文就讨论下这个问题。
实际上,数码设备拍摄照片时,会把许多属性附加在照片文件里,这些属性构成了大家常说的 Exif 信息。访问我的相册会发现照片下也有对应的 Exif 信息。Exif 中有个 Orientation 字段,用来存放照片方向,这就是我们需要的,看下它的定义:EXIF Orientation ValueRow #0 is:Column #0 is:
1TopLeft side
2*TopRight side
3BottomRight side
4*BottomLeft side
5*Left sideTop
6Right sideTop
7*Right sideBottom
8Left sideBottom
NOTE: Values with “*” are uncommon since they represent “flipped” orientations. via
当然,Exif 中的 Orientation 属性,取决于拍照的设备是否拥有方向传感器。不过根据我的了解,目前大部分数码拍照设备都支持记录方向。1 是默认值,2、4、5、7 表示照片进行了翻转。一般情况下,取值应该是 1、3、6、8 中的一种。下面有张更形象的图描述了具体的旋转策略:
如何从图片中获取 Exif 信息,各个语言都有封装好的代码可以直接使用。Javascript 也不例外,国外某同学 08 年就发布了可用代码。他的做法分为两步,首先通过 Ajax 获取原始二进制,这在 firefox 和 webkit 比较好办,在 IE 下需要借助 VBScript 的帮忙;第二步是从原始数据不同位置获取相关信息,基本是体力活了。想深入了解的同学可以点本段几个链接围观下。
从图片 Exif 信息中取到 Orientation 后,就可以根据它来自动旋转图片了,canvas、filter 滤镜、vml、css3 都可以实现图片的旋转。网上也有很多封装好的代码可以直接拿过来用。
综合上文,我写了一个 demo,除了 Opera,兼容大部分其它浏览器(在 Opera11.6 下测试过,也是 OK 的)。
另外,如果用 FileReader Api 获取图片的原始二进制,就可以在浏览器本地实现图片自动旋转。这在图片上传前预览时比较有用,这里有 demo。
PS:其实,大部分的图片查看客户端早已支持自动旋转,所以一般情况下数码设备拍的照片用电脑看,方向都是正确的。许多缩略图生成程序,也是可以指定缩放前自动旋转的(例如 ImageMagick 的 -auto-orient 参数)。
再 PS:纯前端获取图片 Exif,只是一种尝试。如果需要频繁使用 Exif 信息,还是后端获取完,存在数据库比较靠谱。
参考:关于 cooljun
do your good at,challenge what do you want to do
如果你觉得这篇文章对你有帮助,请支持我继续更新网站 !捐赠本站
喜欢 (0)or分享 (0)
php orientation生成图片,图片自动旋转的前端实现方案相关推荐
- 纯css 图片自动旋转动画
css能否实现图片自动旋转动画呢?答案当然是肯定的, 首先看下效果: HTML代码 <img src="https://gimg2.baidu.com/image_search/src ...
- 解决ios横屏拍照图片自动旋转90度问题
解决ios横屏拍照图片自动旋转90度问题 参考文章: (1)解决ios横屏拍照图片自动旋转90度问题 (2)https://www.cnblogs.com/lanshengzhong/p/900856 ...
- iOS开发- 相机(摄像头)获取到的图片自动旋转90度解决办法
http://www.tuicool.com/articles/IfEZre 今天写demo的时候发现, 如果把通过相机获取到的图片,直接进行操作, 比如裁剪, 缩放, 则会把原图片向又旋转90度. ...
- html 背景图片自动旋转,CSS3 菱形拼图实现只旋转div 背景图片不旋转功能
需求背景 使用 vue 做的项目,业务需求有一个拼图效果,默认是深色的背景图,上面分五个区域,每次会亮一个区域,整张图都亮,拼图完成.先来看一下最终的效果图. 应用到的知识点: background- ...
- ios 图片逆时针旋转_iphone-IOS 竖直拍照被旋转,image-orientation 让图片自动旋转
本文目录结构 IOS 垂直拍照的时候会遇到,PC 端读取的时候,逆时针旋转了 90 度的问题: 安卓.PS 处理的,相册选择截图等不会出现这个问题: 场景说明: 这个图片在浏览器里,如果您单独打开的时 ...
- ios 裁剪框大小_iOS自定义裁剪图片比例尺寸,图片自动旋转解决办法
最近因做直播项目需要,要求上传直播的一个Cover页需要自定义裁剪图片的尺寸及比例,因为imagePicker只有一个imagePicker.allowsEditing这么个属性,但是这个属性设置之后 ...
- html中如何使图片自动旋转90度,css怎么让图片旋转90度?
css怎么让图片旋转90度?下面本篇文章给大家介绍一下使用CSS让图片旋转90度的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. css怎么让图片旋转90度? 在CSS中,可以 ...
- iOS照相机获取到的图片自动旋转90度解决办法
情景再现: iOS开发过程中,要实现用用手机摄像头拍一张照片,经过裁剪压缩,然后发出去.结果发出去的图片始终是逆时针旋转了90度的图片. 事出有因: 相机拍照后直接取出来的UIimage(用UIIma ...
- html如何设置图片循环旋转动画效果,如何使用css3实现图片自动旋转的特效(完整代码)...
在介绍如何使用css3实现旋转图片特效的基础上,重点介绍了具体的步骤.这篇论文内容紧凑,希望大家能有所收获. 在浏览网页的过程中,你会遇到一种特殊的效果,叫做图片旋转:不同的图片会根据时间的变化在同一 ...
最新文章
- python 图片对比文件夹_初学Python-找出文件夹下的所有图片
- SpringBoot + RabbitMQ (保证消息100%投递成功并被消费)
- vue开发(1) 软件安装
- oracle 安装及使用方法,Oracle安装及使用小结
- java常用API之DateFormat
- Java多线程之线程池详解
- 下载CIFAR-10、CIFAR-100数据集的方法
- 高频面试题3 类初始化过程与实例初始化
- gazebo 模型导入
- 苹果键盘大小写键灯不亮
- centos审计服务audit导致使centos服务器不能登录,部署的应用不能运行和访问。
- 链游时代来临!1周12款游戏与公有区块链MagnaChain签约上链
- 想了解直播系统开发用什么语言?
- python分析出nba球员的位置_虎扑热帖|Python数据分析|NBA的球星们喜欢在哪个位置出手...
- 区块链在非金融领域有哪些值得期待的应用
- 2009年我国报刊发行创新的五个关键词
- 使用kso​​ap2的Android SOAP客户端示例
- 计算机无法开机出现英文,电脑开机出现英文字母开不了机解决方法
- 南方cass字体样式设置_为什么装了CASS所有字体,还是有文字显示问号?
- 得力计算机怎么把小数化成分数,判断分数能否化成有限小数的方法.ppt