还是那个问题:网上的大胸弟们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 旋转图片的更多相关文章

  1. Exif.js获取图片的详细信息(苹果手机移动端上传图片旋转90度)

    Exif.js插件介绍 http://code.ciaoca.com/javascript/exif-js/ iOS手机竖着拍的照片经过前端处理之后被旋转了90°的原因以及解决方案 https://w ...

  2. 图片上传前 压缩,base64图片压缩 Exif.js处理ios拍照倒置等问题

    曾写过在前端把图片按比例压缩不失真上传服务器的前端和后台,可惜没有及时做总结保留代码,只记得js利用了base64位压缩和Exif.js进行图片处理,还有其中让我头疼的ios拍照上传后会倒置等诸多问题 ...

  3. 详解exif.js,应用于canvas照片倒转(海报H5)

    业务背景,苹果手机调用上传接口拍照没有问题但是上传到网页上照片倒转了解决方法利用exif.js读取图片参数并对图片进行元数据修改 window.btoa(str)转码 window.atob(base ...

  4. js获取图片的EXIF,解决图片旋转问题

    相信大家在做项目的时候会遇到在canvas里加入图片时,图片发生90°,180°的旋转.当时的你肯定时懵逼的,为毛. 其实这就是图片的EXIF搞的鬼. 什么是EXIF 简单来说,Exif 信息就是由数 ...

  5. 利用exif.js解决ios手机上传竖拍照片旋转90度问题

    html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题:Android手机没这个问题. 因此解决这个问题的思路是:获取到照片拍摄的方向角,对非 ...

  6. 利用exif.js解决手机上传竖拍照片旋转90\180\270度问题

    原文:https://blog.csdn.net/linlzk/article/details/48652635/ html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针 ...

  7. 利用exif.js解决ios或Android手机上传竖拍照片旋转90度问题

    html5+canvas进行移动端手机照片上传时,发现ios手机上传竖拍照片会逆时针旋转90度,横拍照片无此问题:Android手机没这个问题. 因此解决这个问题的思路是:获取到照片拍摄的方向角,对非 ...

  8. Vue2.0 引用 exif.js 实现调用摄像头进行拍照功能以及图片上传功能

    vue组件代码 <template> <div> <div style="padding:20px;"> <div class=" ...

  9. rotate.js实现图片旋转 (chrome,IE,firefox都可以实现)

    找了好多资料,要么是IE可以用,但是谷歌不行,,还有就是两个都可以用的,图片大小显示不全.终于找到一个好一点的js,先贴一下代码. 1.rotate.js jQuery.fn.rotate = fun ...

随机推荐

  1. 初识DJango——MTV模型

    一.Django—MTV模型 Django的MTV分别代表: Model(模型):负责业务对象与数据库的对象(ORM) Template(模版):负责如何把页面展示给用户 View(视图):负责业务逻 ...

  2. 连连看(dfs)

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=1175 连连看 Time Limit: 20000/10000 MS (Java/Others)     ...

  3. 一步步教你创建自己的数字货币(代币)进行ICO

    本文从技术角度详细介绍如何基于以太坊ERC20创建代币的流程. 写在前面 本文所讲的代币是使用以太坊智能合约创建,阅读本文前,你应该对以太坊.智能合约有所了解,如果你还不了解,建议你先看以太坊是什么 ...

  4. 【JAVA】SWING_ 界面风格

    在java中,界面外观的管理是由UIManager类来管理的.不同的系统上安装的外观不一样 ,默认的是java的跨平台外观. 1.获取系统所有外观 import javax.swing.*; impo ...

  5. castle之动态代理

    动态代理 DynamicProxy,这里说的动态代理是直接使用Castle.net 中提供的,并非自己实现的,因为别人写的很好,拿着用就行了. 动态代理的工作模式: 一般我们获取一个类型的实例都是通过 ...

  6. 【自制工具类】struts返回json数据包装格式类

    自己写的一个给struts返回的json数据包装格式类,不喜勿喷,原创,需在项目中引入com.alibaba.fastjson的jar包 先看下效果(这里没有使用msg,有兴趣的往下看): 上demo ...

  7. 关于Vue的各个UI框架(elementUI、mint-ui、VUX)

    elementUI 官网:http://element.eleme.io/ 使用步骤: 1.安装完vue-cli后,再安装 element-ui 命令行:npm i element-ui -D 相当于 ...

  8. 更改dede网站地图模板样式

    dedecms后台可以生成2个地图,一个是网站地图,html格式的,一个是rss地图,同样默认这2个地图生成之后也会有底部的dedecms版权声明,这个时候我们需要分别更改这2个模板才可以去掉底部的版 ...

  9. Html Mailto标签详细使用方法

    http://www.360doc.com/content/09/0805/14/16915_4684377.shtml Html Mailto标签详细使用方法 Html中mailto标签是一个非常实 ...

  10. 搭建mybatis时的小问题

    1.源文件中的xml文件经过编译后没有打包到classes中去,在源文件包中写的mapper文件运行时找不到. 解决办法: pom文件build下添加编译时加入xml和resource文件下的所有文件 ...