zoukankan      html  css  js  c++  java
  • 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标签加载的时候却是旋转过的。

  • 相关阅读:
    NGINX -- 详解Nginx几种常见实现301重定向方法上的区别
    数据库外键的使用以及优缺点
    phpok -- 域名问题
    Sql Server系列:多表连接查询
    Go -- cron定时任务的用法
    JavaScript -- 清除缓存
    sql CAST用法
    Mock -- 数据模拟
    EsLint入门
    citus real-time 分析demo( 来自官方文档)
  • 原文地址:https://www.cnblogs.com/ovocake/p/8331155.html
Copyright © 2011-2022 走看看