0

I've tried all of the methods I could find in stackoverflow. This two are some of the most complete posts:

Display image from blob using javascript and websockets

How can you encode a string to Base64 in JavaScript?

I'm using cloudinary and id3js. First I upload the mp3 file to cloudinary, then I request the file with Ajax through id3js. This gives me all of the ID3 tags.

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

And the image converter: 

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

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

This is what the tags object looks like:

enter image description here

I then use the return value of getImage in the background-image attribute of a div. There are no errors in the console (not a bad request) but when opening the data:image/jpg;base64,... link there's only a little white square on the page.

How can I get a working url from the image object in the ID3 tags?

Community
  • 1
  • 1
Sebastian Cruz
  • 65
  • 7

1 Answers1

0

If image.data is an ArrayBuffer, you can use FileReader. FileReader load event is asynchronous, you cannot return the result from the function without using Promise, though you can use FileReaderSync() at Worker.

See also 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}));
Community
  • 1
  • 1
guest271314
  • 1
  • 15
  • 104
  • 177
  • I tried this but the data URI still shows only an empty white square. Same mp3 file in soundcloud displays the embedded image correctly. Any idea what might be happening? – Sebastian Cruz Feb 12 '17 at 20:55
  • @SebastianCruz Is a return value expected from `getImage()`? `FileReader` `load` event returns results asynchronously at `load` event handler. – guest271314 Feb 12 '17 at 21:00
  • See [ArrayBuffer to base64 encoded string](http://stackoverflow.com/questions/9267899/arraybuffer-to-base64-encoded-string) for synchronous solutions to convert `ArrayBuffer` to `base64` string. – guest271314 Feb 12 '17 at 21:13
  • I was not expecting a return value from `getImage()`. I used the `reader.result` data to set the `cover_photo` of `this.state` in `reader.onload`. It does successfully return a data:image/jpg;base64,... string but no image is shown. I tried the approach in the article you posted and I got the same result. – Sebastian Cruz Feb 12 '17 at 22:46
  • How is the `ArrayBuffer` created? Can you reproduce `javascript` at Question at plnkr http://plnkr.co? – guest271314 Feb 12 '17 at 23:18
  • I'm not sure how the `ArrayBuffer` is created. That's just what id3.js returns when extracting the data from the ID3 tags in the mp3 file. Here is the code related to the question [link](http://plnkr.co/edit/Qqs2G6C5iVx3IZLvU0IA?p=catalogue). – Sebastian Cruz Feb 13 '17 at 00:09
  • `javascript` at plnkr link is incomplete, see http://stackoverflow.com/mcve – guest271314 Feb 13 '17 at 00:26
  • The issue appears to be other than script which converts `ArrayBuffer` to `data URI` http://plnkr.co/edit/nipEpqITUb1YqP9ckvub?p=preview. Is `type` correct? – guest271314 Feb 13 '17 at 02:02
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/135541/discussion-between-sebastian-cruz-and-guest271314). – Sebastian Cruz Feb 13 '17 at 03:53