图片方向 image orientation Exif
更新 : 2019-01-02
refer
https://stackoverflow.com/questions/3129099/how-to-flip-images-horizontally-with-html5 (使用 canvas 做 flip)
https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/scale
之前没有说到关于 flip 的概念
当我们用手机自拍时, 屏幕中我们看见的是镜子中的自己,并不是别人眼中的自己哦.
那拍出来的图片也会有这个 exif information
按理说我们在拍摄时屏幕出现的结果就应该是最终图像的结果,但是自拍 = 镜子中的你,显然有点怪,自己看不起怪,别人看就怪怪的
所以一般上遇到这类的图片我们需要 flip, 反向回去.
上面 2 个 refer 是说 canvas 如果做到这个效果, 在 crop 图的时候可以用上.
asp.net core 用 Magick.NET 这个库,里头也是有 .flip() 这个功能.
注 :不同手机对图片的处理是不同的
比如 iphone 自拍是没有 2,4,5,7 的,iphone 会先 flip 然后在 rotate 然后修改掉 exif, 比如你自拍 2, iphone 输出的图片是 3 (很奇怪为什么不弄成 1 呢 ?)
华为则是直接 flip rotate 美美然后把 exif orientation 删除
小米很奇葩, 它虽然和华为一样, rotate 美美然后 exif 干掉 但是它不会 flip.... 所以自拍出来的图片是镜子中的人...
https://foobuzz.github.io/
https://www.thoughtco.com/why-is-my-picture-turned-sideways-1701398
http://cloudinary.com/blog/top_10_mistakes_in_handling_website_images_and_how_to_solve_them
市场上大部分的相机,手机拍摄出来的图片都是横的. 不管你怎么旋转你的手机, 最终的图片一定是横的.
但是呢, 手机会提供一个叫 Exif 的资料, 里头有表面你在拍摄时的手机方向.
这是标准方向
这是 90 度的方向
所有的图片展示软件都依据图片和旋转信息 Exif 来呈现图片最终的样子.
如果一张图的 Exif 丢失了, 或被串改了, 就有可能导致展示的结果出错. 这就是你经常会看见图片颠倒的原因.
然而当前的游览器在展示图片时, 都不参考 Exif 信息, 目前只有 IOS safari 会处理. 所以这种颠倒的画面在游览器更常见.
那么我们该i怎么处理呢?
如果网页的图片都是通过网页 upload 的,那么在 upload 的时候我们需要把带有 exif 信息的图片转换成没有 exif 的图片 ( 这里需要旋转到正确方向 )
exif.js 可以获取到图片信息, 然后通过 canvas 我们可以轻易的重绘一张图(要旋转到对的方向哦). 之后我们就可以把信息丢掉了.
注 :png 是没有 exif 的哦, 好像是只有 jpg jpeg 有罢了.
图片方向 image orientation Exif的更多相关文章
- 使用WebUploader使用,及使用后测试横拍或竖拍图片图片方向不对等解决方案
WebUploader是由Baidu WebFE(FEX)团队开发的一个简单的以HTML5为主,FLASH为辅的现代文件上传组件.在现代的浏览器里面能充分发挥HTML5的优势,同时又不摒弃主流IE浏览 ...
- Java读取图片exif信息实现图片方向自动纠正
起因 一个对试卷进行OCR识别需求,需要实现一个功能,一个章节下的题目图片需要上下拼接合成一张大图,起初写了一个工具实现图片的合并,程序一直很稳定的运行着,有一反馈合成的图片方向不对,起初怀疑是本身图 ...
- 修正ios h5上传图时的图片方向问题
.ios上传会在exif中带一个 Orientation的属性,这个属性在windows中不会生效,在ios浏览器中会生效,造成图片在windows资源管理器中与ios浏览器中方向不一致 为了用户 ...
- 前端手势控制图片插件书写四(图片上传及Ios图片方向问题)
1.在图片上传中,使用的input的type为File的属性.使用filereader的Api let that = this; var file = document.getElementById( ...
- 修正iOS从照相机和相册中获取的图片 方向
修正iOS从照相机和相册中获取的图片 方向 修正iOS从照相机和相册中获取的图片 方向 使用系统相机拍照得到的图片的默认方向有时不是ImageOrientationDown,而是ImageOrie ...
- iOS 上传的图片在HTML上显示时,图片方向信息(EXIF Orientation)异常
将iPhone 6s拍摄的照片上传到服务器之后, 在Web网页上看到图片被逆时针旋转了90度, 这让我很惆怅呐! 出现这个问题其实是因为上传的图片为.jpg格式,.jpg文件含有EXIF信息, 其中E ...
- 在web中如何调整上传过的图片方向 (exif)
前提: 相机中拍的照片放到web上不会自动识别方向,如有些竖向显示的照片放到web上横向显示.这些照片在windows上是正确显示的.但是web不会自动旋转照片到正确方向.下面我们通过两种方法来实现这 ...
- 修正iOS从照相机和相册中获取的图片方向(转)
- (UIImage *)fixOrientation { // No-op if the orientation is already correct if (self.imageOrientati ...
- 修正iOS从照相机和相册中获取的图片方向
使用系统相机拍照得到的图片的默认方向有时不是ImageOrientationDown,而是ImageOrientationLeft,在使用的时候会出现图片顺时针偏转90°.使用fixOrientati ...
随机推荐
- 【题解】Luogu P3740 [HAOI2014]贴海报
woc,今天已经是day -1了 再写一颗珂朵莉树来++rp吧 否则就要AFO了qaq 这有可能是我最后一篇题解/博客qaq 原题传送门:P3740 [HAOI2014]贴海报 考前刷水题到底是对还是 ...
- 【题解】 Luogu P4312 / SP4155 [COCI 2009] OTOCI / 极地旅行社
原题地址:P4312 [COCI 2009] OTOCI / 极地旅行社/SP4155 OTOCI - OTOCI lct入门难度的题,十分弱智(小蒟蒻说lct是什么,能吃吗?) bridge操作判联 ...
- UVa 11997 K Smallest Sums - 优先队列
题目大意 有k个长度为k的数组,从每个数组中选出1个数,再把这k个数进行求和,问在所有的这些和中,最小的前k个和. 考虑将前i个数组合并,保留前k个和.然后考虑将第(i + 1)个数组和它合并,保留前 ...
- JavaScript中数组的排序方法:1.冒泡排序 2.选择排序
//1.选择排序: //从小到大排序:通过比较首先选出最小的数放在第一个位置上,然后在其余的数中选出次小数放在第二个位置上,依此类推,直到所有的数成为有序序列. var arr2=[19, 8, ...
- C++的STL之map自动排序特性
#include <iostream> #include <map> using namespace std; int main() {方法一: map<int,int& ...
- Python3基础 list list()生成空列表
Python : 3.7.0 OS : Ubuntu 18.04.1 LTS IDE : PyCharm 2018.2.4 Conda ...
- yum仓库中源的配置与使用
yum 主要功能是更方便的添加/删除/更新RPM 包,自动解决包的倚赖性问题,便于管理大量系统的更新问题. yum 可以同时配置多个资源库(Repository),简洁的配置文件(/etc/yum.c ...
- 题解——洛谷P2781 传教(线段树)
可以说是数据结构学傻了的典型案例了 昨天跳到这题上 然后思考了一下 噫!好!线段树裸题 然后打完板子,发现\( n \le 10^9 \) 显然线段树直接做不太行 然后这题又只有普及的难度 然后我就 ...
- vs项目模板
创建项目模板 Creating a VSIX Deployable Project (or Item) Template with Custom Wizard Support Create a Pro ...
- 在WPF中调用另存为对话框
Microsoft.Win32.SaveFileDialog dlg = new Microsoft.Win32.SaveFileDialog(); dlg.FileName = "User ...