如何在反应中读取 PNG 的元数据

如何解决如何在反应中读取 PNG 的元数据

png 中有 json 数据，我想读取 PNG 文件中的元数据。 我正在使用 reactjs。 上传图片文件后，有什么想法吗？

import React,{ useState } from 'react'
import {Typography,Button,Form,Input} from 'antd';
import Axios from 'axios';

function test() { 
    const [imgBase64,setImgBase64] = useState(""); 
    const [imgages,setimages] = useState([]);      
    
    const fileupload = (event) => {
      const readit = new FileReader();
  
      reader.onloadend = () => {
        const base64 = readit.result;
        if (base64) {
          setImgBase64(base64.toString()); 
        }
      }
      if (event.target.files[0]) {
        readit.readAsDataURL(event.target.files[0]); 
        setimages(event.target.files[0]); 
        console.log(event.target.files[0]);
      }
    }
    
    return (
        <div style={{"backgroundColor": "#ffffff","width":"100px","height" : "100px"}}>
        </div>
          <input type="file" onChange={fileupload}/>
        </div>
      </div>
    );
  }

export default test

解决方法

你可以使用这个库：https://github.com/hometlt/png-metadata

这是一个例子：

    function loadFileAsBlob(url){
        return new Promise((resolve,reject) => {
          var xhr = new XMLHttpRequest();
          xhr.open('GET',url,true);
          xhr.responseType = 'blob';
          xhr.onload = function(e) {
            if (this.status === 200) {
              resolve(this.response);
              // myBlob is now the blob that the object URL pointed to.
            }else{
              reject(this.response);
            }
          };
          xhr.send();
        })
      };

  //Browser
  const blob = await loadFileAsBlob('1000ppcm.png');
  const buffer = await blob.arrayBuffer();


  //read metadata
  metadata = readMetadata(buffer);

以及您将获得的数据格式：

{
  "pHYs": { 
    "x": 30000,"y": 30000,"units": RESOLUTION_UNITS.INCHES
  },"tEXt": {
    "Title":            "Short (one line) title or caption for image","Author":           "Name of image's creator","Description":      "Description of image (possibly long)","Copyright":        "Copyright notice","Software":         "Software used to create the image","Disclaimer":       "Legal disclaimer","Warning":          "Warning of nature of content","Source":           "Device used to create the image","Comment":          "Miscellaneous comment"
  }
}