如何使用 filepond 获取 exifdata(如 gps)?
how can I fetch exifdata(like gps) with filepond?
我正在尝试使用 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)
}
},
感谢您的阅读和帮助,祝您有愉快的一天!
FilePond 不会读取 EXIF 数据,它只会更正方向 header 参数,以便图像可以在旧版浏览器上正确定位。
您可以使用 Exif-JS 结合 FilePond 读取 EXIF 数据。
https://github.com/exif-js/exif-js
使用beforeAddFile
钩子读取EXIF数据并将其添加到文件项中。
这是一个简单的 JavaScript 示例,应该可以直接移植到 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);
})
})
我正在尝试使用 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)
}
},
感谢您的阅读和帮助,祝您有愉快的一天!
FilePond 不会读取 EXIF 数据,它只会更正方向 header 参数,以便图像可以在旧版浏览器上正确定位。
您可以使用 Exif-JS 结合 FilePond 读取 EXIF 数据。 https://github.com/exif-js/exif-js
使用beforeAddFile
钩子读取EXIF数据并将其添加到文件项中。
这是一个简单的 JavaScript 示例,应该可以直接移植到 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);
})
})