[英]How to use HTML5 and transferControlToProxy?
我在使用画布来处理图片的JS应用程序上工作(即,使用.toBlob()和.toDataURL() 转换为png / base64 。
我将使用.transferControlToProxy()让工作人员完成工作并获得平滑的GUI。
但这似乎不受支持... 就像他们在Mozilla开发人员上所说的那样
你们中有些人还有其他信息吗? 也许解决方法?
Whatwg.org有在使用canvas.transferControlToProxy()的一个JavaScript样本https://developers.whatwg.org/the-canvas-element.html#dom-canvas-transfercontroltoproxy ,但它似乎并没有工作在任何浏览器呢,甚至不是最新版本(Chrome Canary或Opera Next)。
即使在chrome:// flags中启用“启用实验性画布功能”,在Chrome Canary中也无效。
实时测试: http : //jsbin.com/bocoti/5/edit?html,输出
它说:“ TypeError:canvas.transferControlToProxy不是一个函数”。
这将是一个很好的补充。 考虑在工作器中的画布上绘制所有内容,并创建画布的blob / arraybuffer / dataurl,然后使用Transferable对象将其传输到主线程。 如今,如果您想使用画布功能(fill(),drawImage()等)在画布上绘制某些东西,则必须在主线程中进行...
<!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>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.