reactjs - How can I read metadata of PNG in react

Question

There is json data in png, and I want to read that metadata in the PNG file. I am using reactjs. After upload an image file, and then any idea?

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

question from:https://stackoverflow.com/questions/65947107/how-can-i-read-metadata-of-png-in-react

Answer 1

You could use this library: https://github.com/hometlt/png-metadata

Here is an example:

    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);

And the format of the data you will get:

{
  "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"
  }
}