Chrome 网络工作者和 createImageBitmap 崩溃

Question

我目前在使用 webworkers 加载图像时遇到问题。我想批量加载一堆图像，然后对这些图像进行一些处理（在我的例子中，使用 createImageBitmap 将源图像转换为 ImageBitmap）。当前，用户可以取消请求。如果工作人员尚未完成，则在尝试终止工作人员时会导致崩溃。我在此处 https://jsfiddle.net/e4wcro0o/18/ 创建了一个持续崩溃的 fiddle。

问题出在这里：

function closeWorker() {
   if (!isClosed) {
    console.log("terminating worker");
    isClosed = true;
    worker.terminate();
  }
}

for (let i = 0; i < srcImages.length; i++) {
    loadImageWithWorker(new URL(srcImages[i], window.location).toString()).then(function(img) {
    closeWorker();
    console.log(img);
  });
}

在第一个已解决的承诺上调用 closeWorker() 可能看起来有点古怪，但这是否意味着崩溃是可重现的。我只用 64.0.3282.186 (Official Build) (64-bit)

在 chrome 上测试过

对我做错了什么有什么想法吗？

Answer 1

我遇到了同样的问题。我认为原因是在 createImageBitmap 函数期间终止了 worker。

我修改了你的 JSFiddle，使用了一种尽早终止 worker 以避免崩溃的方法。

const worker = createWorker(() => {

    const pendingBitmaps = {};
    var pendingKill = false;

    self.addEventListener("message", e => {

        const src = e.data;

        if (src == "KILL") {
            pendingKill = true;
            Promise.all(Object.values(pendingBitmaps)).then(_ => self.postMessage("READY"));
        }

        // not accepting anymore conversions
        if (pendingKill) {
            self.postMessage({src, bitmap: null});
            return;
        }

        pendingBitmaps[src] = fetch(src).then(response => response.blob())
            .then(blob => {
                if (pendingKill) return null;
                return createImageBitmap(blob);
            })
            .then(bitmap => {
                self.postMessage({src,bitmap});
                delete pendingBitmaps[src];
            })
    })
});

https://jsfiddle.net/wrf1sLbx/16/

Chrome 网络工作者和 createImageBitmap 崩溃

Chrome crash with webworkers and createImageBitmap

javascript

crash

google-chrome

web-worker