Question

我在使用网络工作者加载图片时遇到了问题。我想批量加载一堆图像，然后对这些图像进行处理（在我的例子中，使用ImageBitmap将源图像转换为createImageBitmap）。目前，用户可以取消请求。如果工作者尚未完成，则在尝试终止worker时会导致崩溃。我在这里创造了一个小提琴https://jsfiddle.net/e4wcro0o/18/，它一直崩溃。

问题在于：

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函数期间终止了工作进程。

我用一种尽早终止工作程序以避免崩溃的方法修改了您的JSFiddle。

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与webworkers和createImageBitmap崩溃

1 个答案: