how to use picture.data?

[laeo]

i'm trying to show it by the code:

URL.createObjectURL(new Blob(tag.tags.picture.data, { type: tag.tags.picture.format }))

but fail, how to use it?

[aadsm]

The first argument to the Blob constructor needs to be an Array of ArrayBuffer, ArrayBufferView, Blob, DOMString which is not the case for .picture.data. I do it like this in my code:

var imageData = frame.data.data;
var base64String = "";
for (var i = 0; i < imageData.length; i++) {
  base64String += String.fromCharCode(imageData[i]);
}
content = document.createElement("img");
content.src = "data:" + frame.data.format + ";base64," + window.btoa(base64String);

[captbaritone]

I took a slightly different approach and used URL.createObjectURL():

const { data, type } = data.tags.picture;
const byteArray = new Uint8Array(data);
const blob = new Blob([byteArray], { type });
const albumArtUrl = URL.createObjectURL(blob);

One note, this requires that you use URL.revokeObjectURL to clean up the URL when you are done with it.

@aadsm Would you like a PR that adds one or both of these examples to the docs? Currently I don't see any documentation of what the picture data format is.

[tagmetag]

@captbaritone Thanks bro!

[aadsm]

@captbaritone yes! would love to have it :)

[Borewit]

As commented in my review on #112

I don't think you want to use picture.type: https://github.com/aadsm/jsmediatags/blob/2f52390c2882a3bc005f2f356a6e6cf99bb93045/src/ID3v2FrameReader.js#L687-L709

I had more luck using:

// picture.format using music-metadata this is a valid MIME type, not sure if that is the case here
img.src = `data:${picture.format};base64,${picture.data.toString('base64')}`;

[mohamed-ayman-aly]

const base64String = tags.tags.picture.data.map(ch => String.fromCharCode(ch)).join(''); it is much faster