程序员经验分享-hwhale

JS 客户端 Exif 方向：旋转和镜像 JPEG 图像

2024-02-05

数码相机照片通常保存为带有 EXIF“方向”标签的 JPEG。为了正确显示，图像需要根据设置的方向进行旋转/镜像，但浏览器会忽略渲染图像的此信息。即使在大型商业 Web 应用程序中，对 EXIF 方向的支持也可能不稳定1 http://www.daveperrett.com/articles/2012/07/28/exif-orientation-handling-is-a-ghetto/。同一来源还提供了一个很好的总结8个不同的方向JPEG 可以有：

示例图像可在4 http://www.galloway.me.uk/2012/01/uiimageorientation-exif-orientation-sample-images/.

问题是如何在客户端旋转/镜像图像，以便其正确显示并在必要时可以进一步处理？

有 JS 库可用于解析 EXIF 数据，包括方向属性2 https://github.com/jseidelin/exif-js。 Flickr 指出解析大图像时可能存在性能问题，需要使用 webworkers3 http://code.flickr.net/2012/06/01/parsing-exif-client-side-using-javascript-2/.

控制台工具可以正确地重新定向图像5 https://superuser.com/questions/36645/how-to-rotate-images-automatically-based-on-exif-data。解决该问题的 PHP 脚本位于6 http://www.neilyoungcv.com/blog/code-share/image-resizing-with-php-exif-orientation-fix/


github项目JavaScript 加载图像 https://github.com/blueimp/JavaScript-Load-Image为 EXIF 方向问题提供完整的解决方案，正确旋转/镜像所有 8 个 exif 方向的图像。请参阅在线演示javascript exif 方向 http://blueimp.github.io/JavaScript-Load-Image/

图像被绘制到 HTML5 画布上。它的正确渲染是在js/加载图像方向.js https://github.com/blueimp/JavaScript-Load-Image/blob/master/js/load-image-orientation.js通过画布操作。

希望这可以节省其他人一些时间，并向搜索引擎介绍这个开源宝石:)

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

javascript

Rotation

html5canvas

EXIF

JS 客户端 Exif 方向：旋转和镜像 JPEG 图像 的相关文章

  • 如何在javascript中使用自动递增id？

  • 在 HTML TextArea 中设置（或读取）光标/插入符的值

    我正在尝试 但失败了 在 HTML 文本区域中实现拖放机制 使用 jQuery 或 Scriptaculous 我们都使用 拖放机制相对容易 因此我愿意接受使用这两者之一的答案 问题是 我似乎找不到读取或设置插入点的方法 我最终想要做的是确

  • 使用 jQuery 的 .trigger('dragstart') 实现 HTML5 的拖放功能时如何 .setData/.getData

    当使用 jQuery 的 trigger dragstart 在具有 ondragstart drag event 属性的元素上触发函数时 如何使用 setData getData 实现 HTML5 在触摸设备上的拖放 流程示例 用户通过

  • 如何在本机反应中发出触摸事件

    我正在尝试启用 panResponder 以拖放模式在屏幕上移动组件 然而 这种拖放必须通过longPress在这样的元素上 longPress捕获事件 所以当panResponder已启用onStartShouldSetPanRespon

  • 发送电子邮件的 Google Apps 脚本语法错误。无法识别我的问题

    我正在尝试让 Google 工作表从工作簿中另一张工作表的长列表中发送个性化电子邮件 我使用了教程 因为我是所有编码语言的认证新手 但 AppScript 告诉我第 4 行有语法错误 我一生都无法弄清楚我做错了什么 但我确信当由具有这些合法

  • 使用时间序列数据和scaleBand指定D3条形图上的刻度

    我尝试为具有时间序列数据的 d3 v4 条形图指定多个刻度和多个刻度标签 如下图所示 基于本教程 https bl ocks org zigahertz 1ee4965ff76514517bb7ce6af21e5d44我有一个处理时间序列数

  • Protractor - 等待多个元素

    我正在尝试等待页面上的多个元素 我不知道可能有多少个 但至少会有一个 我知道使用以下命令等待单个元素 效果很好 var EC protractor ExpectedConditions browser wait EC presenceOf

  • Apache 服务器上的服务器端 Javascript

    我们打算使用Apache https httpd apache org 用于 Web 开发的服务器 对于服务器端脚本 我们希望使用服务器端 javascript 要使服务器端 javascript 在 Apache 服务器上工作需要什么 S

  • 更改 Angular 模型以更新 Kendo

    我一直在一个项目中使用 Angular 最近才发现 Kendo Angular 项目位于http kendo labs github io angular kendo http kendo labs github io angular ke

  • jQuery 选择器在控制台中不起作用

    我一辈子都无法解决这个问题 我正在运行 js 容器状态 是页面上正在运行的 js 的控制台日志 它显示一个选择器 但如果我想在控制台中执行任何操作 它只会返回 null 我假设我在某个地方过度编写了 jQuery 函数 就好像我调用了 jQ

  • 子视图控制器旋转方法未被调用

    Summary 我试图将子视图控制器添加到父视图控制器 并让父视图控制器通知子视图控制器旋转事件 但是 旋转消息不会转发到子视图控制器 这是默认行为 为什么这种默认行为没有发生 环境 iOS 7 XCode 5 OSX 10 9 Detai

  • 在 WordPress 和 woocommerce 中禁用 zxcvbn.min.js

    如您所知 zxcvbn min js 约为 400kb 并且默认在 WordPress 网站中加载 我想知道如何阻止加载此 JavaScript 库 因为我不想在我的网站中检查密码长度 将以下内容添加到主题的 function php 或自

  • 谷歌地图API v3如何获取所有形状的坐标

    我有这个谷歌脚本 可以创建形状和删除形状 但没有太多关于保存形状的信息 我查了一下互联网 知道我可以通过 overlaycomplete 中的 getpaths 访问路径坐标 而且我还可以将坐标推入一个收集所有形状的数组中 但是 如果用户删

  • 每次页面重新加载时都会出现新的 Google 登录库提示

    在我的项目中 我使用常规弹出客户端 JS 身份验证 平台客户端 https developers google com identity sign in web sign in 我从旧版 Google Sign 迁移到新版 Google I

  • 将 MathJax 脚本添加到 Office 365 Sharepoint 中的页面

    我正在尝试将 Mathjax 库添加到 SharePoint 库 以便我们可以使用 LaTex 语法来添加方程 我在网上搜索时看到了多种方法 但似乎没有一种方法可以与最新版本的 MathJax 和 Office 365 版本的 ShareP

  • iOS 11 getUserMedia 不起作用？

    苹果公司发表声明称getUserMedia将在 iOS 11 上完全正常运行 安装 iOS 11 Beta 版本 5 后 我确实收到一条消息 表明我的网站请求访问我的相机和麦克风 但似乎是这样的 video src window URL c

  • Electron Auth0Lock“原始文件://不允许”

    尝试让 auth0 与我的电子应用程序一起使用 当我按照默认教程并尝试使用用户名 密码 身份验证进行身份验证时 锁定失败并显示 403 错误 并响应 不允许使用 Origin file 我还在 auth0 仪表板中客户端设置的允许来源 CO

  • IE7 问题 - 当禁用文件下载自动提示时无法下载流式文件

    我的应用程序是基于 J2EE JSP Servlet 的 当我尝试从 JSP 打开新窗口 弹出窗口 并调用 Servlet 操作 例如 Streamer do 以在该弹出窗口内传输 PDF 文件时 我遇到了问题 问题 当 IE 7 gt 工

  • 从另一台服务器读取 Node.js 中的大文件

    我有两台相互通信的服务器 Server1 向 Server2 请求文件的部分内容 并将收到的数据存储到一个文件中 Server2 应该接收每个请求并创建一个流管道传输数据 假设服务器2中存储的文件 目录 如下 bigfile gz bigf

  • AngularJS 应用程序：如何将 .js 文件包含到 index.html 中

    我是 angularJS 的新手 我设法使用 AngularJS 构建了一个phonegap应用程序 该应用程序正常并且运行良好 问题是 现在我对 angularJS 的工作原理有了更多的了解 至少我认为我已经了解了 我担心我的应用程序文件

随机推荐

  • 在 datagridview 中右对齐列不起作用

    我有一个datagridiview这是动态绑定到datatable 我想将标题中的一些列右对齐 我尝试了这个设置datagridview对于单元格样式和标题单元格 对于单元格样式 它显示正确 但对于标题 它不是 我使用的代码 this da

  • 在 GitHub 中编辑 git 提交消息

    有没有办法在线编辑提交消息GitHub com 提交后 从命令行 人们可以做 git commit amend m New commit message 正如以下问题中正确建议的那样 如何修改现有的 未推送的提交消息 https stack

  • 如何防止表单被提交？

    我有一个表单 其中某处有一个提交按钮 但是 我想以某种方式 捕获 提交事件并防止其发生 我有什么办法可以做到这一点吗 我无法修改提交按钮 因为它是自定义控件的一部分 与其他答案不同 返回false只是part的答案 考虑一下在 return

  • 在 Yii 中创建三个以上表的关系

    当我尝试在 Yii 中创建三个以上表的关系时 以下方法给我带来了麻烦 public function relations return array info gt array self BELONGS TO Software ITEM ID

  • Swift 可以从异步 Void 返回块返回值吗？

    我想创建一个函数来检查 user id 是否已在我的数据库中 class func checkIfUserExsits uid String gt Bool userRef childByAppendingPath uid observeS

  • printf 的包装

    我在Arduino下编码 我想开发串行打印格式化功能 所以我尝试使用sprintf未知大小的缓冲区 基本上 我们可以避免谈论 Arduino 及其串行输出 并考虑将文本写入缓冲区 然后使用printf 我试过这个 include

  • matplotlib.mplot3d 立方体表面的底图

    正如标题所示 我试图在 matplotlib mplot3d 线图的 z 0 表面上绘制底图地图 我知道 Axes3D 对象能够在 z 0 表面上绘图 通过 Axes3D plot Axes3D scatter 等 但我不知道如何使用 Ba

  • 从一组坐标中找到最接近的坐标

    我有大约 1000 组地理坐标 纬度 经度 给定一个坐标 我想从该集合中找到最接近的一个 我的方法是测量距离 但每秒数百个请求对于服务器执行所有数学运算来说可能有点粗糙 对此最好的优化解决方案是什么 Thanks 您将想要使用 最近邻算法

  • 在 setter 方法的情况下，为什么 irb 会回显赋值的右侧而不是返回值？

    令人惊讶的是 在所有其他情况下 irb 都会回显方法的返回值 为什么通过 setter 进行分配的行为会有所不同 我正在使用 Ruby 2 2 2 irb main 001 0 gt def x value puts puts from x

  • 统计同一张表上多个条件的SQL

    我正在尝试编写一个查询 返回在 2020 年 1 月 1 日之后购买 镜子 或 自行车 并且在 12 个月内还购买了 书 或 沙发 的客户 使用计数以防他们购买多次 我编写的查询不完整 因此我需要一些帮助 我缺少计算未来 12 个月内订单数

  • 如何将 LINQ 查询相互附加？

    我有一个表单 可以根据他们选择的内容过滤数据 我正在尝试将 linq 查询相互附加 以便最终结果是他们在屏幕上选择的结果 这是我的代码 private void button Search Click object sender Event

  • Spring JPA：从异步方法处理时数据未保存到数据库

    我有一个使用 Spring JPA 的应用程序 并使用 Async spring 注释执行一些后台进程 该过程需要将参数保存在数据库中 或者如果参数已经存在则更新数据库 这不能正常工作 因为在 Async 方法完成后我的数据实体没有保留在数

  • beans.xml 上的文件过早结束

    xml 的内容

  • 通过 Rails 3 中的范围进行预加载

    我一直在尝试根据 Rails3 应用程序中的某些范围急切加载关联 但找不到任何解决方案 我的应用程序有以下型号 class Project has many entries has many to dos class ToDo has ma

  • 强制触摸 UITableViewCell 内的 UICollectionView

    我有一个带有 Tableview 的 viewController 多个 TableViewCell 并且在每个 TableViewCell 中都有一个带有多个 UICollectionViewItems 的 UICollectionVie

  • 纯 JS 幻灯片菜单，能够“在菜单外部单击”关闭它

    我正在尝试重新表述我的问题 并将完成我所做的所有步骤 特别是我失败的地方 我对 JS 的了解并不深 但有通过实践学习的意愿以及社区的帮助 我偶然发现这个答案 https stackoverflow com a 38317768 559718

  • 使用 POST 请求重定向的好方法？

    我需要通过 POST 请求将用户重定向到外部站点 我想到的唯一选择是通过 JavaScript 提交表单 有任何想法吗 不太明白你的意思 所以我们举几个场景 用户应该将表单发布到您自己以外的服务器 很简单 只需将目标指定为表单操作即可

  • （Codesandbox，Vue）“属性或方法“children”未在实例上定义，但在渲染期间引用。”

    我目前正在构建一个状态管理器 它可以集成到多个前端框架中 包括 Vue 为了演示 Vue 中状态管理器的用法 我创建了一个简单的codesandbox 因为有一个实时代码示例总是很好 可以在自述文件中进行推广 但不知何故 我总是在代码和框中

  • Path 中加号的 Data 值是多少

    如何使用 Path 对象中的 data 属性绘制加号和减号 这是我的三角形路径对象 我需要将其更改为加号

  • JS 客户端 Exif 方向：旋转和镜像 JPEG 图像

    数码相机照片通常保存为带有 EXIF 方向 标签的 JPEG 为了正确显示 图像需要根据设置的方向进行旋转 镜像 但浏览器会忽略渲染图像的此信息 即使在大型商业 Web 应用程序中 对 EXIF 方向的支持也可能不稳定1 http www

热门标签