读取在线图的元数据XMP

原创

江拥羡橙

修改于 2024-12-02 21:02:14

1100

🚀先给大家推荐一篇好文章：程序员启示录

不要追求完美，专注于成长，重视沟通，不要闭门造车。保持好奇心，不要局限于一种技术，享受编程的乐趣，不忘初心！

1.文件流解析

安装XMP

yarn add xmp-js
or
npm i --save xmp-js

安装x2js

npm install --save x2js

安装 vit-plugin-require-transform（解决vite中不能用require的问题）

yarn add -D vite-plugin-require-transform
or
npm i vite-plugin-require-transform --save-dev

vit-plugin-require-transform安装成功后配置vite.config.js

import requireTransform from 'vite-plugin-require-transform';
 
export default defineConfig({
  plugins: [
    requireTransform({
      fileRegex: /.js$|.vue$/
    }),
  ],
});

代码部分：

import XMP from "xmp-js";  
const xmlStr = ref('');
  //x2js解析
   function x2jsparse(){
        const x2js = require('x2js');
        const x2jsone=new x2js(); //实例
        const xmp = x2jsone.xml2js(xmlStr.value)
        console.log("🚀 ~ parse ~ xmp:", xmp)
   }

//在线文件转blob
const urlToBlob = async (url: string): Promise<Blob> => {
                const response = await fetch(url); // 获取文件内容
                const blob = await response.blob(); // 转成 blob
                return blob;
    }
//取xmp结构
  urlToBlob('https://www.jpg').then(e=>{
            // let file = e.target.files[0];
            var reader = new FileReader();
            reader.onload = e => {
                console.log("🚀 ~ urlToBlob ~ e:", e)
                let xmp = new XMP(e.target.result);
                console.log("🚀 ~ urlToBlob ~ xmp:", xmp)
                let raw = xmp.find();
                console.log("🚀 ~ urlToBlob ~ raw:", raw)
                let parsed = xmp.parse();
                console.log("🚀 ~ urlToBlob ~ parsed:", parsed)
                xmlStr.value = raw;
                //调用解析方法
                x2jsparse();
                
            };
            reader.readAsDataURL(e);
        }).catch(err=>{
            console.log("🚀 ~ setup ~ err:", err)
         });

图片：

结果：可以解析出这张图片的xmp信息

解释

fetchFileHeader 函数：通过 Fetch API 来获取文件的指定字节数（比如前1024字节），并返回一个 ArrayBuffer。
parseXmpMetadata 函数：首先调用 fetchFileHeader 获取文件的头部数据，然后将其解码成字符串。通过查找 XMP 元数据的起始和结束标签，提取出 XMP 元数据部分，并使用 xmp-parser-js 库进行解析。
TextDecoder：将 ArrayBuffer 转为字符串，方便后续的字符串操作。
xmp-parser-js：假设你参考或找到了用于解析 XMP 数据的 JavaScript 库。