我在一个 JS 应用程序上工作，它使用 Canvas 来操作图片(即 并使用 .toBlob() 和 .toDataURL( 转换为 png/base64 )。
我会使用 .transferControlToProxy() 让工作人员完成工作并获得流畅的 GUI。
但是好像不支持... as they said on Mozilla devs
你们有些人有其他信息吗？ 也许有解决方法？
最佳答案
Whatwg.org 在 https://developers.whatwg.org/the-canvas-element.html#dom-canvas-transfercontroltoproxy 有一个使用 canvas.transferControlToProxy() 的 javascript 示例，但它似乎不适用于任何浏览器，甚至不适用于最新版本(Chrome Canary 或 Opera Next)。
即使在 chrome://flags 中启用“启用实验性 Canvas 功能”在 Chrome Canary 中也没有任何效果。
现场测试:http://jsbin.com/bocoti/5/edit?html,output
它说:“类型错误:canvas.transferControlToProxy 不是函数”。
这将是一个非常好的补充。考虑在工作人员的 Canvas 上绘制所有内容，并制作 Canvas 的 blob/arraybuffer/dataurl 并使用 Transferable 对象将其传输到主线程。如今，如果您想使用 Canvas 函数(fill()、drawImage() 等)在 Canvas 上绘制一些东西，您必须在主线程中进行...
<!DOCTYPE html><html><head><meta charset="utf-8" /></head><body>
<div id="log"></div>
<canvas style="border:1px solid red"></canvas>
<script id="worker1" type="javascript/worker">
self.onmessage = function(e) {
var context = new CanvasRenderingContext2D();
e.data.setContext(context); // event.data is the CanvasProxy object
setInterval(function () {
context.clearRect(0, 0, context.width, context.height);
context.fillText(new Date(), 0, 100);
context.commit();
}, 1000);
}
</script>
<script>
var blob = new Blob([document.querySelector('#worker1').textContent]);
var worker = new Worker(window.URL.createObjectURL(blob));
worker.onmessage = function(e) {
//document.querySelector("#log").innerHTML = "Received: " + e.data;
}
var canvas = document.getElementsByTagName('canvas')[0];
try { var proxy = canvas.transferControlToProxy();
worker.postMessage(proxy, [proxy]);}
catch(e) { document.querySelector("#log").innerHTML = e; }
</script>
<br>
From: <a href="https://developers.whatwg.org/the-canvas-element.html#the-canvas-element">https://developers.whatwg.org/the-canvas-element.html#the-canvas-element</a>
</body></html>
关于javascript - 如何使用 HTML5 和 transferControlToProxy？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28148455/