Webworkers 可以通过以下方式获取常规图像XMLHttpRequest， 正确的？那么工作人员如何将这些图像绘制到 OffscreenCanvas 上呢？大概想用XMLHttp.responseType = 'blob'?
另一种方法是设置src图像元素，然后将元素传输给工人，但我的工人总是拒绝这样的图像。
Thanks
The 图像位图 API https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/createImageBitmap是为了这个目的（除其他外）。
注意：此演示目前仅在 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>
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
