问题描述
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"
}
}