使用JavaScript從ID3圖像數據顯示圖像

Question

我已經嘗試了所有可以在stackoverflow中找到的方法。 這是一些最完整的帖子：

使用javascript和websockets顯示blob中的圖像

如何在JavaScript中將字符串編碼為Base64？

我正在使用cloudinary和id3js。 首先，我將mp3文件上傳到cloudinary，然后通過id3js向Ajax請求該文件。 這給了我所有的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)));
}

標簽對象如下所示：

然后，我在div的background-image屬性中使用getImage的返回值。 控制台中沒有錯誤（很不錯的請求），但是打開data：image / jpg; base64，...鏈接時，頁面上只有一個小白方塊。

如何從ID3標簽中的圖像對象獲取有效的網址？

Answer 1

如果image.data是ArrayBuffer ，則可以使用FileReader 。 FileReader load事件是異步的，盡管可以在Worker使用FileReaderSync() ，但不使用Promise不能從函數返回結果。

另請參閱Safari上的createImageBitmap替代方案 。

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}));