如何在图像标签中显示mp3文件中的图像答案

【问题标题】：how to display the image inside a mp3 file in a image tag如何在图像标签中显示mp3文件中的图像
【发布时间】：2020-02-06 16:53:09
【问题描述】：

您好，我正在尝试使用 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 图像时，我得到了类似的东西。 screen capture of the base64 image

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

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

但是图片没有出现在标签中。没有控制台错误。如果您能提供帮助，那就太好了。谢谢。

【问题讨论】：

您是说从 mp3 文件中获取像专辑封面这样的图像吗？ stackoverflow.com/questions/29881237/… 这看起来很有帮助 github.com/aadsm/jsmediatags
这能回答你的问题吗？ how can I get the cover of an mp3 file?
非常感谢，我可以通过 github.com/aadsm/jsmediatags 完成。我猜我用错了阅读器

标签： javascript reactjs typescript id3-tag base64url

【解决方案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);
    }
  });

【讨论】：