问题描述
我有一个小大"问题.
我使用敏捷上传器上传多张图片,该组件调整了所有图片的大小(效果很好),但是这样做会丢失exif数据.
我可以使用JS在客户端读取exif数据吗?鉴于该域名不是同一个域名.
I have a little "big" problem.
I use agile-uploader to upload multiple image, this component resize all the picture (it works very well) but by doing this I lose exif data.
Can I read exif data in the client-side using JS ? given that isn't the same name domain.
推荐答案
是.有一个新的库 exifr ,您可以使用它来完成此工作.它是维护,积极开发的,注重性能的库,可在nodejs和浏览器中使用.
Yes. There's a new library exifr with which you can do exactly that. It's maintained, actively developed library with focus on performance and works in both nodejs and browser.
从一个文件中提取exif的简单示例:
Simple example of extracting exif from one file:
document.querySelector('#filepicker').addEventListener('change', async e => {
let file = e.target.files[0]
let exifData = await exif.parse(file)
console.log('exifData', exifData)
})
从多个文件中提取exif的复杂示例:
Complex example of extracting exif from multile files:
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)
})
您甚至可以提取文件中嵌入的缩略图:
And you can even extract thumbnail thats embedded in the file:
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)
})
您还可以尝试使用库的游乐场并尝试图像及其输出,或者查看存储库和文档.
You can also try out the library's playground and experiment with images and their output, or check out the repository and docs.
这篇关于我可以使用js在客户端读取图片的Exif数据吗?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持!