Get image’s EXIF data on Vue.js
I wrote codes get EXIF data of image using Vue.js for liks79 who is my dear friend.
I used vue-picture-input and exif-js. You can confirm EXIF data on browser console.
<!DOCTYPE html>
<html>
<head>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vue-picture-input"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/exif-js/2.3.0/exif.js" async></script>
<title>Vue exif getter In the browser!</title>
</head>
<body>
<div id="app">
<p></p>
<picture-input ref="pictureInput" @change="onChange"></picture-input>
</div>
<script>
var app = new Vue({
el: '#app',
data: {
message: 'Vue exif meta info getter'
},
components: {
'picture-input': PictureInput
},
methods: {
onChange (image) {
console.log('onChange!')
if (image) {
EXIF.getData(this.$refs.pictureInput.file, function() {
console.log('image info', this)
console.log('exif data', this.exifdata)
})
} else {
console.log(`it's not image`)
}
}
}
})
</script>
</body>
</html>
Working code on jsfiddle may be helpful.
End!
/https://tf-cmsv2-smithsonianmag-media.s3.amazonaws.com/filer/Marie-antoinette-1792-631.jpg)
Leave a comment