как отобразить изображение внутри mp3-файла в теге изображения - PullRequest
Новая
       37

как отобразить изображение внутри mp3-файла в теге изображения

0 голосов
/ 06 февраля 2020

Привет. Я пытался показать изображение, полученное из mp3-файла, в теге изображения, используя html и reactjs. Это код, который я использовал. 

   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>

Но изображение не отображается в теге. Консольных ошибок нет. Отлично, если вы можете помочь. Спасибо.

1 Ответ

0 голосов
/ 07 февраля 2020

Я могу исправить, используя https://www.npmjs.com/package/jsmediatags

Сначала вы должны установить библиотеку jsmediatags, используя npm install jsmediatags --save

Это код, который я использую для получения изображения 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);
    }
  });
...