Webworkers 可以通过 XMLHttpRequest
获取常规图像,对吗?那么工作人员如何将这些图像绘制到 OffscreenCanvas 上呢?可能想使用 XMLHttp.responseType = 'blob'
?
另一种方法是设置图像元素的src
,然后将该元素传输给工作人员,但我的工作人员总是拒绝此类图像。
谢谢
最佳答案
ImageBitmap API来这里就是为了这个目的(除其他外)。
注意:此演示目前仅在 Chrome 上运行...
const offcanvas = canvas.transferControlToOffscreen();
const worker = new Worker(getWorkerURL());
worker.onmessage = e => console.log(e.data);
worker.postMessage(offcanvas, [offcanvas]);
function getWorkerURL() {
return URL.createObjectURL(
new Blob([
worker_script.textContent
])
);
}
<canvas id="canvas" height="450"></canvas>
<script id="worker_script" type="ws">
onmessage = async (evt) => {
try {
const canvas = evt.data;
const ctx = canvas.getContext('2d');
if(!ctx) {
postMessage('unsupported browser');
return;
}
const imgblob = await fetch('https://upload.wikimedia.org/wikipedia/commons/5/55/John_William_Waterhouse_A_Mermaid.jpg')
.then(r => r.blob());
const img = await createImageBitmap(imgblob);
ctx.drawImage(img, 0,0, canvas.width, canvas.height);
}
catch(e) {
postMessage('unsupported browser');
throw e;
}
};
</script>
关于javascript - Webworker OffscreenCanvas 绘制常规图像,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56553281/