如何使用filepond获取exifdata(如gps)？
如何使用filepond获取exifdata(如gps)？
提问于 2021-08-10 03:33:56
我正在尝试使用filepond来完成我的任务，但是我无法从照片中获取exifdata。
例如，正如我所期望的那样
File {name: "KakaoTalk_20210727_153219119.jpg", lastModified: 1627367574529, lastModifiedDate: Tue Jul 27 2021 15:32:54 GMT+0900 (Korean Standard Time), webkitRelativePath: "", size: 2319798, …}
exifdata: {ImageWidth: 4000, ImageHeight: 2252, Make: "samsung", Model: "SM-G988N", Orientation: 1, …}
iptcdata: {}
lastModified: 1627367574529
lastModifiedDate: Tue Jul 27 2021 15:32:54 GMT+0900 (Korean Standard Time) {}
name: "KakaoTalk_20210727_153219119.jpg"
size: 2319798
type: "image/jpeg"
webkitRelativePath: ""我想用像这样的filepond代码获得这样的exifdata，但是我找不到它:(
file: File
lastModified: 1627367574529
lastModifiedDate: Tue Jul 27 2021 15:32:54 GMT+0900 (Korean Standard Time) {}
name: "KakaoTalk_20210727_153219119.jpg"
size: 2319798
type: "image/jpeg"
webkitRelativePath: ""
_relativePath: ""我真的需要gps数据来做我的工作，我怎样才能得到它？
这是Vue-filepond代码。
<template>
<div id="test">
<br>
<br>
<br>
<br>
<br>
<file-pond
name="test"
ref="pond"
allowImageExifOrientation = "true"
label-idle="Drop files here..."
allowprocess="false"
v-bind:allow-multiple="true"
accepted-file-types="image/jpeg, image/png"
:server="myServer"
instantUpload ="false"
v-bind:files="myFiles"
v-on:init="handleFilePondInit"
imageTransformOutputStripImageHead = "false"
allowImagePreview="true"
imagePreviewHeight="300px"
@initfile="oninitfile()"
@updatefiles="FilePondUpdateFiles"
/>
<br>
<p style="text-align:center">hi</p>
<div v-for="imageFile in imageFiles" :key="imageFile.name" style="text-align:center;">
<img :src="imageFile.src" alt="" style="width: 200px">
</div>
</div>
</template> methods: {
handleFilePondInit: function () {
console.log("FilePond has initialized");
// FilePond instance methods are available on `this.$refs.pond`
this.$refs.pond.getFiles();
console.log(this.$refs.pond.getFiles())
},
// 파일 staging시
oninitfile() {
console.log("onInit!")
},
FilePondUpdateFiles(files) {
console.log("기본적인 이미지 검색 방식", this.$refs['pond'].file)
console.log(files)
console.log("onAdd!")
this.imageFiles = files
console.log("총 사진 데이터", this.imageFiles)
}
},感谢您的阅读和帮助，祝您有愉快的一天！
回答 1
Stack Overflow用户
回答已采纳
发布于 2021-08-16 06:27:33
FilePond不读取EXIF数据，它只更正了orientation头参数，因此图像可以在较旧的浏览器上正确定向。
您可以结合使用Exif-JS和FilePond来读取EXIF数据。https://github.com/exif-js/exif-js
使用EXIF钩子读取beforeAddFile数据并将其添加到文件项中。
这是一个简单的JavaScript示例，应该直接指向port to Vue。
FilePond.create({
beforeAddFile: (fileItem) => new Promise(resolve => {
const success = EXIF.getData(fileItem.file, () => {
fileItem.setMetadata('exifdata', EXIF.getAllTags())
// Added EXIF data to file item, we're done
resolve(true);
})
// Can't read EXIF data, don't add file
if (!success) resolve(false);
})
})页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/68720796
复制相关文章
相似问题
腾讯云开发者
