可以用js在客户端读取图片的Exif数据吗?

2024-05-13

我有一个小“大”问题。
我使用agile-uploader上传多个图像,这个组件调整了所有图片的大小(它工作得很好),但是这样做我丢失了exif数据。
我可以使用JS在客户端读取exif数据吗?鉴于这不是同一个名称域。


是的。有一个新图书馆exifr https://github.com/MikeKovarik/exifr你可以用它来做到这一点。它是一个维护、积极开发的库,重点关注性能,并且可以在 Nodejs 和浏览器中运行。

从一个文件中提取 exif 的简单示例:

document.querySelector('#filepicker').addEventListener('change', async e => {
  let file = e.target.files[0]
  let exifData = await exif.parse(file)
  console.log('exifData', exifData)
})

从多个文件中提取 exif 的复杂示例:

document.querySelector('#filepicker').addEventListener('change', async e => {
    let files = Array.from(e.target.files)
    let promises = files.map(exif.parse)
    let exifs = await Promise.all(promises)
    let dates = exifs.map(exif => exif.DateTimeOriginal.toGMTString())
    console.log(`${files.length} photos taken on:`, dates)
})

您甚至可以提取嵌入在文件中的缩略图:

let img = document.querySelector("#thumb")
document.querySelector('input[type="file"]').addEventListener('change', async e => {
  let file = e.target.files[0]
  img.src = await exifr.thumbnailUrl(file)
})

您还可以尝试图书馆的操场 http://mutiny.cz/exifr/并尝试图像及其输出,或者查看存储库和文档 https://github.com/MikeKovarik/exifr.

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

可以用js在客户端读取图片的Exif数据吗? 的相关文章

  • Javascript树遍历算法

    我需要帮助以深度优先的方式遍历树结构 我无法想出一个算法来正确地做到这一点 我的输入是这样的 A B C 1 2 a b c d 输出应采用以下形式 A 1 a A 1 b A 1 c A 1 d A 2 a A 2 b A 2 c A 2
  • 如何从 JavaScript 中计算 HTML 表格的渲染高度?

    调整窗口大小时 我需要知道表格有多大 以便我可以动态地很好地适应中间的所有其他内容 表格高度仅取决于动态加载的内容 如何在 JavaScript 中计算表格的渲染高度 您可以使用element offsetHeight https deve
  • Javascript 与 Python 关于 Python 'map()' 函数的比较

    Python中有一个函数叫做map这可以让你去 map someFunction x y z 并继续应用该功能的列表 是否有与此功能等效的 JavaScript 我现在刚刚学习Python 虽然我被告知javascript是函数式语言 但我
  • 如何使用 axios / jest 测试失败的请求

    我创建了一个非常小的应用程序 如果您传递硬币和数量 它可以计算为某些加密货币支付的总价格 我想测试错误 但我总是收到 收到的承诺已解决而不是被拒绝 我相信这是因为如果 url 错误 axios 仍然会解决承诺 我遇到的第二个问题是 我尝试测
  • 在 asp.net vb 中通过第一个下拉列表值填充第二个下拉列表

    我在使用 asp net vb 时遇到了一些问题 我想做的是有2个下拉框 第一个下拉菜单将有 1 2 3 例如 第二个下拉菜单将有 A 乙 C 默认情况下 但是 如果选择 1 我希望第二个下拉菜单自动选择 c 我不知道 JavaScript
  • jQuery 的 css() 在应用于滚动事件时滞后

    我正在尝试实现一个简单的 固定标题 表 我知道这在理论上只能用 CSS 来完成 但是当涉及到 OSX Lion 及其消失的滚动条时 它效果不佳 所以我用 jQuery 来做 方法很简单 只有1 5行代码 inbox scroll funct
  • ngModel.$parsers 忽略 ng-model 值末尾的空格

    我有这样的指令 directive noWhitespace parse function parse return restrict A require ngModel link function scope element attrs
  • 是否可以将反应组件导出为非反应项目中的函数

    有没有办法在非 React 项目中将 React 组件导出为函数并传入 props 作为函数的参数 我最近用 create react app 完成了一个 React 项目 现在我想将它用于其他非 React 项目 纯 Javascript
  • 是否可以覆盖 javaScript 原始数据类型?

    问题是不言自明的 我知道可以扩展原始数据类型 例如string但有可能覆盖它吗 这是在采访中被问到的一个问题 不 你不能覆盖任何东西 Ecma脚本定义原始类型 http es5 github com x4 3 2 Undefined Nul
  • 引入 V8 后,Google Apps 脚本无法为其他用户完全执行

    我编写了一个脚本 得到了这里好心人的大力帮助 该脚本使用 Google Sheets 脚本复制 Google Drive 上的文件夹 和内容 它运行了很长一段时间 但后来我启用了 V8 引擎 现在已禁用 问题是 它仍然适用于我 也许还有其他
  • 使用 jQuery 仅从字符串末尾修剪空格

    我知道 jQuery trim 函数 但我需要的是一种仅从字符串末尾修剪空格的方法 而不是开头 So str this is a string 会成为 str this is a string 有什么建议么 Thanks 您可以使用正则表达
  • ReactJS:从没有 onChange 事件的 props 中选择默认值?

    所以 我只是想知道我是否绝对需要在 React 中的选择组件上有一个 onChange 事件处理程序 我有一个道具传递我想要选择的选项的默认值 如果我有的话 它就没有问题
  • 空 URL 哈希导致页面在 js 事件上跳转

    我有一个带有下一个和上一个按钮的照片库 如果我的某个 javascript 方法由于某种原因被破坏 那么当单击其中一个按钮时 它会向 url 添加一个哈希值 即 www google com 我知道可以给散列一个 div id 来跳转到页面
  • setInterval 内的返回值

    我想在 setInterval 内返回一个值 我只想以一定的时间间隔执行一些操作 这就是我尝试过的 function git limit var i 0 var git setInterval function console log i
  • 将 NPM 包客户端与 nuxt 结合使用

    我对 nuxt 和 javascript 非常陌生 我正在尝试弄清楚如何在客户端使用我的应用程序的依赖项 我将它们列在我的 nuxt config js 中并使用 npm 安装 我也有一个文件 plugins导入它们的目录 不确定这是否好
  • 使用 JavaScript 的计时器

    我想使用java脚本实现计时器 我想随着间隔的变化而减少计时器 Example假设我的计时器从 500 开始 我想要根据级别减少计时器 例如1 一级定时器应减1 且递减速度应较慢 2 2级定时器应递减2 递减速度应为中等3 3级定时器应减3
  • 使用 Lodash 的 TypeScript:_.map(["123", " 234 "], _.trim) 返回 boolean[]?

    我有一个字符串数组 它们已像这样分割 var searchValue 600 800 123 180 var groups searchValue split gt 600 800 123 180 因此项目周围可能存在空格 并且我想删除空格
  • 常规 JavaScript 可以与 jQuery 混合使用吗?

    例如 我可以采用这个脚本 来自 Mozilla 教程 https developer mozilla org en Canvas tutorial Basic usage
  • 在声明组件选择器时添加指令 - Angular 7

    我正在学习 Angular 并通过单击按钮动态创建组件 我正在尝试使用 Angular Material 的拖放功能来拖动这些创建的组件以对它们进行排序 我的基本组件 html 中有以下代码 div style margin 20px di
  • Serviceworker Bug event.respondWith

    我的 serviceworker 的逻辑是 当发生获取事件时 它首先获取包含一些布尔值 而不是 event request url 的端点 并根据我正在调用的值检查该值event respondWith 对于当前的获取事件 我正在提供来自缓

随机推荐

  • 如何使用 rspec 测试 ActionCable 和 Devise?

    在我的 Rails 5 1 应用程序中 我使用设备进行身份验证和 ActionCable 我的 ActionCable 连接如下所示 module ApplicationCable class Connection lt ActionCab
  • ImportError:在 Google 应用引擎中找不到 django.utils

    当我在 google app engine 项目中使用 django utils 中的 simplejson 时 出现此错误 Traceback most recent call last File base python27 runtim
  • 使用 Outlook 365 API 在组织中获取电子邮件的最佳方式

    我正在构建一个应用程序 用于从组织内部的电子邮件收集统计信息 我们假设这些组织使用 Outlook 365 我希望能够以最简单的方式执行以下操作 获取阅读组织中所有邮件的权限 获取电子邮件 附件并运行我的统计数据 Outlook 365 似
  • vim 退出时恢复 shell

    我刚刚在我的新计算机上安装了 Arch 但我不知道需要向 vimrc 添加什么命令 以便它在退出时恢复 shell 内容 在调用 vim 之前 也就是说 我希望我的 shell 看起来像这样 whoami root who root tty
  • 使用 Linq to Entities 查询创建 null ienumerable

    我正在开发一个使用实体框架的 ASP NET MVC 项目 我需要将从数据库中提取的值投影到PropertyValue类型 如下所示 public class PropertyValue public string StringValue
  • 将所有工作簿工作表复制到新工作簿 VBA

    我正在使用此代码将工作簿中的每张工作表复制到新工作簿中 它工作正常 但它颠倒了工作表的顺序 是否有办法阻止它这样做 Sub copy copies all the sheets of the open workbook to a new o
  • Java 数组操作

    我有一个名为 resize 的函数 它接受源数组 并将大小调整为新的宽度和高度 我认为我正在使用的方法效率低下 我听说有更好的方法可以做到这一点 无论如何 当scale是一个int时 下面的代码有效 然而 还有第二个函数称为 half 它使
  • Dart:如何在本机扩展中创建流

    在我的本机扩展中 我需要将整数流式传输到我的 Dart 控制台应用程序 在概念上非常相似 标准输入 如何创建向控制台应用程序公开的本机 Dart Stream 对象 我尝试为您创建一个示例并将其放在 github 上 https githu
  • r caret 包中的 train 函数的模型输出尺寸巨大

    我正在使用 bagFDA 模型进行训练train r caret 包中的函数 并将模型输出保存为 Rdata 文件 输入文件大约有 300k 条记录 有 26 个变量 但输出 Rdata 大小为 3G 我只是运行以下命令 modelout
  • VirtualAlloc 对齐方式与分配大小一致吗?

    当使用VirtualAlloc用于分配和提交具有页面边界的两倍大小的虚拟内存区域的 API 例如 void address VirtualAlloc 0 0x10000 MEM COMMIT PAGE READWRITE Get 64KB
  • 求解超定系统最小二乘的最快方法

    我有一个大小为 m n 的矩阵 A m 阶约为 100K n 阶约为 500 和向量 b 另外 我的矩阵是病态的并且等级不足 现在我想找出 Ax b 的最小二乘解 为此我比较了一些方法 scipy linalg lstsq 时间 剩余 14
  • @urql/svelte,“在组件初始化之外调用的函数”如果不在 onMount 中

    我正在尝试由https github com FormidableLabs urql tree master packages svelte urql https github com FormidableLabs urql tree ma
  • 如何向标准集合编辑器添加图标?

    我有一个自定义控件 它利用TCollection and TCollectionItem 在集合编辑器中 我想向每个列表项添加图标 该列表项由内部TImageList 在其父组件内 集合项本身代表图标 我想在这个编辑器中显示相应的图标 如何
  • 在 shell 脚本中连接命令字符串

    我正在维护一个现有的 shell 脚本 它将命令分配给 shell 脚本中的变量 例如 MY COMMAND bin command dosomething 然后接下来 它通过执行以下操作将 参数 传递给 MY COMMAND MY ARG
  • 无法在“CanvasRenderingContext2D”上执行“drawImage”

    我收到以下错误 未捕获的类型错误 无法在 CanvasRenderingContext2D 上执行 drawImage 提供的值不是 HTMLImageElement或HTMLVideoElement或HTMLCanvasElement或I
  • 获取总体 CPU 百分比使用率的可能性有哪些

    我有以下问题 在UWP中 我们如何获取总体CPU使用率 RAM使用率 可用RAM 正在运行的进程等 UWP 中的任务管理器需要它 您好 经过一番查看后 您似乎无法获得设备 CPU RAM 和可用 RAM 或正在运行的进程 您可以获得 CPU
  • 如何在不使用 LINQ 的情况下按降序对 FileInfo 对象数组进行排序

    我必须降级我的代码才能在 NET 2 0 上工作 因为它不支持 LINQ 目前 该代码对数组进行排序FileInfo对象由他们FullName属性 使用 LINQ 如下所示 Dim files As FileInfo files files
  • 如何重命名 GitHub 网站上的目录/文件夹?

    我在 GitHub 网站上找到了一种方法rename https github com blog 1436 moving and renaming files on github一个文件并成功完成 我也找到了一种方法rename https
  • 在 Amazon Redshift COPY 命令中转义分隔符

    我正在将数据从 Amazon S3 提取到 Amazon Redshift 中的表中 该表包含多个列 其中某些列数据可能包含特殊字符 复制命令有一个选项称为Delimiter我们可以在将数据拉入表时指定分隔符 问题有2个方面 当我导出时 u
  • 可以用js在客户端读取图片的Exif数据吗?

    我有一个小 大 问题 我使用agile uploader上传多个图像 这个组件调整了所有图片的大小 它工作得很好 但是这样做我丢失了exif数据 我可以使用JS在客户端读取exif数据吗 鉴于这不是同一个名称域 是的 有一个新图书馆exif