Hi I was trying to show the image retrieved from a mp3 file in a image tag using html and reactjs. This is the code I used.
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);
}
when I console the base64 image I got something like this. screen capture of the base64 image
I tried to show the retrieved image using this code
<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>
But the image does not appear in the tag. There is no console errors. Great if you can help. Thanks.
I could fix using https://www.npmjs.com/package/jsmediatags
First you have to install jsmediatags library using npm install jsmediatags --save
This is the code that I use to get the image of the 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); } });
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.