如何在图像标记中显示 MP3 文件中的图像

Question

嗨，我试图使用 html 和 reactjs 在图像标签中显示从 mp3 文件中检索到的图像。这是我使用的代码。

async getImageFromUploadedFile(framesRetrieved){
const imageArrayBufferRetrieved = framesRetrieved[4].value.data;
var blob = new Blob([imageArrayBufferRetrieved]);
var reader = new FileReader();
reader.onload = function(event){
var base64 =   event.target.result;
};
reader.readAsDataURL(blob);
}

当我控制台 base64 图像时，我得到了这样的东西。 base64 图像的屏幕截图

我尝试使用此代码显示检索到的图像

<Grid item xs={12}>
<Grid item container xs={6}>
<div id="title"></div>
<img src="data:image/png;base64,base64"/>
<div id="audioContainer"></div>
<div id="lyricsContainer"></div>
</Grid>
</Grid>

但图像不会显示在标签中。没有控制台错误。如果你能帮忙，那就太好了。谢谢。

Answer 1

我可以使用 https://www.npmjs.com/package/jsmediatags 修复

首先，您必须使用npm install jsmediatags --save安装jsmediatags库

这是我用来获取mp3图像

的代码

var jsmediatags = require("jsmediatags");
new jsmediatags.Reader(content)
.setTagsToRead(["title", "artist","picture","lyrics"]).read({
onSuccess: function(tag) {
var tags = tag.tags;
var base64String = "";
for (var i = 0; i < tags.picture.data.length; i++) {
base64String += String.fromCharCode(tags.picture.data[i]);
}
var dataUrl = "data:" + tags.picture.format + ";base64," +window.btoa(base64String);
document.getElementById('cover').setAttribute('src',dataUrl);
},
onError: function(error) {
console.log(':(', error.type, error.info);
}
});