使用 javascript 从 ID3 图像数据显示图像

Question

我已经尝试了可以​​在 stackoverflow 中找到的所有方法。这两个是一些最完整的帖子：

Display image from blob using javascript and websockets

How can you encode a string to Base64 in JavaScript?

我正在使用 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 标签中的图像对象中获取有效的 url？

Answer 1

如果image.data 是ArrayBuffer，您可以使用FileReader。 FileReader load 事件是异步的，如果不使用Promise，您将无法从函数返回结果，尽管您可以在Worker 中使用FileReaderSync()。

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