Показать изображение из данных ID3 с использованием javascript

Question

Я пробовал все методы, которые я мог найти в stackoverflow. Это две являются одними из наиболее полных сообщений:

Display image from blob using javascript and websockets

How can you encode a string to Base64 in JavaScript?

Я использую cloudinary и id3js. Сначала я загружаю mp3-файл в cloudinary, затем я запрашиваю файл с Ajax через id3js. Этот дает мне все теги ID3.

openUploadModal() { 
     cloudinary.openUploadWidget(window.cloudinaryOptions, 
     (errors, track) => { 
      if(!values(errors).length) { 

       id3(track[0].secure_url, (errs, tags) => { 
        this.setState({ 
         title: tags.title, 
         audio_url: track[0].secure_url, 
         artist: tags.artist, 
         uploaded: true, 
         cover_photo: this.getImage(tags.v2.image) 
        }); 
       }); 
      } 
     }); 
    } 

И ЭОП:

getImage(image) { 
    var arrayBuffer = image.data; 
    var bytes = new Uint8Array(arrayBuffer); 

    return "data:image/png;base64,"+btoa(unescape(encodeURIComponent(bytes))); 
} 

Это то, что объект теги выглядит следующим образом:

Затем я использую возвращаемое значение GetImage в фоновом режиме -изображение атрибута div. В консоли нет ошибок (не плохой запрос), но при открытии данных: image/jpg; base64, ... link есть только маленький белый квадрат на странице.

Как я могу получить рабочий URL-адрес объекта изображения в тегах ID3?

Answer 1

Если image.data является ArrayBuffer, вы можете использовать FileReader. FileReaderload Событие является асинхронным, вы не можете вернуть результат из функции без использования Promise, хотя вы можете использовать FileReaderSync() по адресу Worker.

См. Также createImageBitmap alternative on Safari.

var reader = new FileReader(); 
reader.onload = function() { 
    // do stuff with `data URI` of `image.data` 
    console.log(reader.result); 
} 
reader.readAsDataURL(new Blob([image.data], {type:image.mime}));