我试图在网络工作者上加载和解码图像(png)文件。 我使用XMLHttpRequest作为Blob来获取图像数据,然后尝试使用ImageBitmap创建一个createImageBitmap。 这在主线程上工作正常,但是在Web Worker上运行相同的代码时会给出DomException。我发现从xhr请求返回的blob在主线程和Web worker上执行时有所不同,特别是在我得到的主线程上
Blob {size: 526050, type: "image/png"}
在网络工作者上时
Blob {size: 175, type: "text/html"}
这是相关代码:
const loadImg = (url) => {
const xhr = new XMLHttpRequest()
xhr.responseType = "blob"
return new Promise((resolve, reject) => {
xhr.onload = () => {
const blob = xhr.response
// This gives Blob {size: 526050, type: "image/png"} on the main thread and
// Blob {size: 175, type: "text/html"} on the web worker
console.log(blob)
createImageBitmap(blob).then((img) => {
return resolve(img)
}).catch(e => {
return reject(e)
})
}
xhr.onerror = (error) => {
return reject(error)
}
xhr.open("get", url, true);
xhr.send();
})
}
const test = async () => {
try {
const img = await loadImg("src/assets/image.png")
console.log(img)
}
catch (e) {
console.error(e)
}
}
test()
为什么在运行来自主线程和Web Worker的请求时得到两个不同的Blob对象?
在Chrome,Windows上测试