vue.js3:用exif-js读取图片的exif信息(vue@3.2.36)

2022-06-08 19:01:14 阅读：203 来源： 互联网

一，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