[英]Display image from ID3 image data using javascript
I've tried all of the methods I could find in stackoverflow. 我已经尝试了所有可以在stackoverflow中找到的方法。 This two are some of the most complete posts:
这是一些最完整的帖子:
Display image from blob using javascript and websockets 使用javascript和websockets显示blob中的图像
How can you encode a string to Base64 in JavaScript? 如何在JavaScript中将字符串编码为Base64?
I'm using cloudinary and id3js.
我正在使用cloudinary和id3js。 First I upload the mp3 file to cloudinary, then I request the file with Ajax through id3js.
首先,我将mp3文件上传到cloudinary,然后通过id3js向Ajax请求该文件。 This gives me all of the ID3 tags.
这给了我所有的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)
});
});
}
});
}
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: 标签对象如下所示:
I then use the return value of getImage in the background-image attribute of a div. 然后,我在div的background-image属性中使用getImage的返回值。 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.
控制台中没有错误(很不错的请求),但是打开data:image / jpg; base64,...链接时,页面上只有一个小白方块。
How can I get a working url from the image object in the ID3 tags? 如何从ID3标签中的图像对象获取有效的网址?
If image.data
is an ArrayBuffer
, you can use FileReader
. 如果
image.data
是ArrayBuffer
,则可以使用FileReader
。 FileReader
load
event is asynchronous, you cannot return the result from the function without using Promise
, though you can use FileReaderSync()
at Worker
. FileReader
load
事件是异步的,尽管可以在Worker
使用FileReaderSync()
,但不使用Promise
不能从函数返回结果。
See also createImageBitmap alternative on Safari . 另请参阅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}));
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.