如何使用HTML5和transferControlToProxy？

Question

I work on an JS application which use canvas to manipulate a picture (ie and convert to png/base64 with .toBlob() and .toDataURL() . 我在使用画布来处理图片的JS应用程序上工作（即，使用.toBlob（）和.toDataURL（） 转换为png / base64 。

I would use .transferControlToProxy() to let a worker do the job and get a smooth GUI. 我将使用.transferControlToProxy（）让工作人员完成工作并获得平滑的GUI。

But it seems to be unsupported... as they said on Mozilla devs 但这似乎不受支持... 就像他们在Mozilla开发人员上所说的那样

Some of you have other information ? 你们中有些人还有其他信息吗？ Maybe a workaround ? 也许解决方法？

Answer 1

Whatwg.org has a javascript sample of using canvas.transferControlToProxy() at https://developers.whatwg.org/the-canvas-element.html#dom-canvas-transfercontroltoproxy , but it does not seem to work in any browser, even not in bleeding edge versions (Chrome Canary or Opera Next). Whatwg.org有在使用canvas.transferControlToProxy（）的一个JavaScript样本https://developers.whatwg.org/the-canvas-element.html#dom-canvas-transfercontroltoproxy ，但它似乎并没有工作在任何浏览器呢，甚至不是最新版本（Chrome Canary或Opera Next）。

Even turning "Enable experimental canvas features" at chrome://flags has no effect in Chrome Canary. 即使在chrome：// flags中启用“启用实验性画布功能”，在Chrome Canary中也无效。

Test live: http://jsbin.com/bocoti/5/edit?html,output 实时测试： http ： //jsbin.com/bocoti/5/edit？html，输出

It says: "TypeError: canvas.transferControlToProxy is not a function". 它说：“ TypeError：canvas.transferControlToProxy不是一个函数”。

This would be a very fine addition. 这将是一个很好的补充。 Think of drawing everything on canvas in a worker and make a blob/arraybuffer/dataurl of canvas and transfer this to main thread using Transferable objects. 考虑在工作器中的画布上绘制所有内容，并创建画布的blob / arraybuffer / dataurl，然后使用Transferable对象将其传输到主线程。 Nowadays if you want to draw something on canvas using canvas functions (fill(), drawImage() etc.), you have to do it in main thread... 如今，如果您想使用画布功能（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>

如何使用HTML5和transferControlToProxy？

问题描述

1 个解决方案

解决方案1
1 2015-09-08 07:10:30

如何使用HTML5和transferControlToProxy？

问题描述

1 个解决方案

解决方案1 1 2015-09-08 07:10:30

解决方案1
1 2015-09-08 07:10:30