在网络工作者上加载/解码图像:不正确的Blob大小/类型和DomException

时间:2019-05-03 16:05:32

标签: javascript xmlhttprequest blob web-worker

我试图在网络工作者上加载和解码图像(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上测试

0 个答案:

没有答案