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ファイルを cloudineにアップロードしてから、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の戻り値を使用

：

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

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

これは、タグオブジェクトは、次のようになりますdivの-image属性。コンソールにエラーはありません（悪い要求ではありません）が、データを開くと、image/jpg; base64、...リンクにページ上の小さな白い四角形しかありません。

ID3タグ内のイメージオブジェクトから作業URLを取得するにはどうすればよいですか？

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