exif.js 旋转图片
还是那个问题:网上的大胸弟们BB一大堆,没几个给的代码能用的,话不多说,直接上demo:
链接:https://pan.baidu.com/s/1jJ6vnt8 密码:swwm
不要忽视demo中的setTimeout,每个人的机子和浏览器的反应速度不同,而exif.js貌似又是异步型的,如果不用setTimeout,会导致在某些浏览器(PC或手机)不能旋转。我在demo设置的时间为1毫秒,这时间是最短的了,不设置的话,本屌的谷歌浏览器有50%的几率不旋转图片。我试过同事的iphone6S,要设置到500毫秒才能保证百分百旋转。(如果各位觉得这样用户体验不好,可先设置图片透明度为0,旋转完成后再变成1,即可解决转图片的坑爹视觉效果)。
下面介绍何为exif,
EXIF(Exchangeable Image File)是“可交换图像文件”的缩写,当中包含了专门为数码相机的照片而定制的元数据,可以记录数码照片的拍摄参数、缩略图及其他属性信息,简单来说,Exif信息是镶嵌在 JPEG/TIFF 图像文件格式内的一组拍摄参数,需要注意的是EXIF信息是不支持png,webp等图片格式的。
对于七牛,可以在图片后面加?exif参数来获取图片的exif信息。
对于Orientation参数,简单的说是记录图片拍摄的相机的旋转信息,浏览器(需要浏览器支持)可以根据这个参数中的val信息自动旋转图片到正确的方向。
简单来说:iphone和数码相机拍出来的照片带exif,用照片查看器,或在iphone上看图片是正的,在浏览器中用img标签加载的时候却是旋转过的。
exif.js 旋转图片的更多相关文章
- Exif.js获取图片的详细信息(苹果手机移动端上传图片旋转90度)
Exif.js插件介绍 http://code.ciaoca.com/javascript/exif-js/ iOS手机竖着拍的照片经过前端处理之后被旋转了90°的原因以及解决方案 https://w ...
- 图片上传前 压缩,base64图片压缩 Exif.js处理ios拍照倒置等问题
曾写过在前端把图片按比例压缩不失真上传服务器的前端和后台,可惜没有及时做总结保留代码,只记得js利用了base64位压缩和Exif.js进行图片处理,还有其中让我头疼的ios拍照上传后会倒置等诸多问题 ...
- 详解exif.js,应用于canvas照片倒转(海报H5)
业务背景,苹果手机调用上传接口拍照没有问题但是上传到网页上照片倒转了解决方法利用exif.js读取图片参数并对图片进行元数据修改 window.btoa(str)转码 window.atob(base ...
- js获取图片的EXIF,解决图片旋转问题
相信大家在做项目的时候会遇到在canvas里加入图片时,图片发生90°,180°的旋转.当时的你肯定时懵逼的,为毛. 其实这就是图片的EXIF搞的鬼. 什么是EXIF 简单来说,Exif 信息就是由数 ...
- 利用exif.js解决ios手机上传竖拍照片旋转90度问题
html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题:Android手机没这个问题. 因此解决这个问题的思路是:获取到照片拍摄的方向角,对非 ...
- 利用exif.js解决手机上传竖拍照片旋转90\180\270度问题
原文:https://blog.csdn.net/linlzk/article/details/48652635/ html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针 ...
- 利用exif.js解决ios或Android手机上传竖拍照片旋转90度问题
html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题:Android手机没这个问题. 因此解决这个问题的思路是:获取到照片拍摄的方向角,对非 ...
- Vue2.0 引用 exif.js 实现调用摄像头进行拍照功能以及图片上传功能
vue组件代码 <template> <div> <div style="padding:20px;"> <div class=" ...
- rotate.js实现图片旋转 (chrome,IE,firefox都可以实现)
找了好多资料,要么是IE可以用,但是谷歌不行,,还有就是两个都可以用的,图片大小显示不全.终于找到一个好一点的js,先贴一下代码. 1.rotate.js jQuery.fn.rotate = fun ...
随机推荐
- Spring读取外部属性-properties
概述 在Spring中处理外部值最简常用的方法就是外部创建name.properties文件,并在其中声明变量值,供Java进行读取.比如数据源信息配置,Java固定属性位置等.读取的方式一般由三种: ...
- [51nod1254]最大子段和 V2
N个整数组成的序列a[1],a[2],a[3],-,a[n],你可以对数组中的一对元素进行交换,并且交换后求a[1]至a[n]的最大子段和,所能得到的结果是所有交换中最大的.当所给的整数均为负数时和为 ...
- [bzoj3282]Tree (lct)
昨天看了一天的lct..当然幸好最后看懂了(也许吧..) 论善良学长的重要性T_T,老司机带带我! 这题主要是删边的时候还要判断一下..蒟蒻一开始天真的以为存在的边才能删结果吃了一发wa... 事实是 ...
- Codeforces 626C
...
- Android扫码二维码、美女瀑布流、知乎网易音乐、动画源码等
Android精选源码 QRCode 扫描二维码.扫描条形码.相册获取图片后识别.生... 一个简洁好看的loading弹窗 Android用瀑布流展示美女图片源码 Android知乎阅读 ...
- 详解:Python2中的urllib、urllib2与Python3中的urllib以及第三方模块requests
在python2中,urllib和urllib2都是接受URL请求的相关模块,但是提供了不同的功能.两个最显著的不同如下: 1.urllib2可以接受一个Request类的实例来设置URL请求的hea ...
- JS中const、var 和let的区别
今天第一次遇到const定义的变量,查阅了相关资料整理了这篇文章.主要内容是:js中三种定义变量的方式const, var, let的区别. 1.const定义的变量不可以修改,而且必须初始化. 1 ...
- Django App(三) View+Template
接着上一节(二)的内容,首先启动站点,通过界面添加Question和Choice两张表的数据,因为接下来,要向polls app里面添加views. 1.添加数据如下(这里是通过界面操作添加的数据) ...
- 算法-java代码实现归并排序
归并排序 对于一个int数组,请编写一个归并排序算法,对数组元素排序. 给定一个int数组A及数组的大小n,请返回排序后的数组. 测试样例: [1,2,3,5,2,3],6 [1,2,2,3,3,5] ...
- 通过自定义的URL Scheme启动你的App
iPhone SDK可以把你的App和一个自定义的URL Scheme绑定.该URL Scheme可用来从浏览器或别的App启动你的App. 如何响应从别的App里发给你的URL Scheme申请,由 ...