vue.js3:用exif-js读取图片的exif信息(vue@3.2.36)
作者：互联网
一，exif-js相关信息:
官网:
http://code.ciaoca.com/javascript/exif-js/代码地址:
https://github.com/exif-js/exif-js
说明：刘宏缔的架构森林是一个专注架构的博客，地址：https://www.cnblogs.com/architectforest
对应的源码可以访问这里获取： https://github.com/liuhongdi/
或: https://gitee.com/liuhongdi
说明：作者:刘宏缔 邮箱: 371125307@qq.com
二，添加exif-js到项目中
1,从github下载代码，把exif.js文件复制到public/static/js目录下一份:如图:
2,在index.html中引入js代码：
<!DOCTYPE html>
<html lang="">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<script type="text/javascript" language="JavaScript" src="static/js/exif.js"></script>
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without
JavaScript enabled. Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
注意我们所添加的是这一行:
<script type="text/javascript" language="JavaScript" src="static/js/exif.js"></script>
三，使用exif-js读取图片exif信息的js代码:
Exif.vue<template>
<div>
<img v-if="imgSrc.length > 0" id="fg" :src="imgSrc" style="width:300px;" />
<br/>
选择图片读取exif信息:
<input type="file" ref="hiddenfile" accept="image/*" @change="readExif" class="hiddenInput" />
<div v-if="isExif == 1">
<div v-for="(item, index) in tags " :key="index" style="display: flex;text-align: left;">
<div style="width:200px; ">{{ index }}:</div>
<div style="width:600px; ">
{{ item }}
</div>
</div>
</div>
<div v-if="isExif == 0">
图片无exif信息可读取
</div>
</div>
</template>
<script>
import {ref} from "vue"
export default {
name: "ExifImg",
setup() {
//exif tags
const tags = ref({});
//当前图片是否存在exif
const isExif = ref(-1);
//图片的src
const imgSrc = ref("");
//读取exif
const readExif = (e) => {
let file = e.target.files[0];
let reader = new FileReader();
reader.readAsDataURL(file);
reader.onload = () =>{
imgSrc.value = reader.result;
var img = new Image();
img.src = imgSrc.value;
img.onload = () => {
// console.log("图片加载成功:");
window.EXIF.getData(img, function(){
let tags1 = window.EXIF.getAllTags(this);
tags.value = tags1;
if (Object.getOwnPropertyNames(tags.value).length >0) {
isExif.value = 1;
} else {
isExif.value = 0;
}
var pretty = window.EXIF.pretty(this);
console.log(pretty);
});
}
}
}
return {
readExif,
tags,
isExif,
imgSrc,
}
}
}
</script>
<style scoped>
</style>
四，查看效果
五，查看vue框架的版本:
liuhongdi@lhdpc:/data/vue/imgtouch$ npm list vue imgtouch@0.1.0 /data/vue/imgtouch ├─┬ @vue/cli-plugin-babel@5.0.4 │ └─┬ @vue/babel-preset-app@5.0.4 │ └── vue@3.2.36 deduped ├─┬ element-plus@2.2.2 │ ├─┬ @element-plus/icons-vue@1.1.4 │ │ └── vue@3.2.36 deduped │ ├─┬ @vueuse/core@8.6.0 │ │ ├─┬ @vueuse/shared@8.6.0 │ │ │ └── vue@3.2.36 deduped │ │ ├─┬ vue-demi@0.13.1 │ │ │ └── vue@3.2.36 deduped │ │ └── vue@3.2.36 deduped │ └── vue@3.2.36 deduped └─┬ vue@3.2.36 └─┬ @vue/server-renderer@3.2.36 └── vue@3.2.36 deduped
标签：vue,exif,36,js,deduped,3.2 来源： https://www.cnblogs.com/architectforest/p/16356803.html