如何在react中读取PNG元数据?

Question

在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

Answer 1

您可以使用这个库: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"
}
}