4

我在一个 JS 应用程序上工作，它使用画布来操作图片（即并使用.toBlob()和.toDataURL()转换为 png/base64。

我会使用.transferControlToProxy()让工作人员完成工作并获得流畅的 GUI。

但它似乎不受支持......正如他们在 Mozilla 开发人员中所说的那样

你们中有些人还有其他信息吗？也许一种解决方法？

4

1 回答 1

1

Whatwg.org 在https://developers.whatwg.org/the-canvas-element.html#dom-canvas-transfercontroltoproxy有一个使用 canvas.transferControlToProxy() 的 javascript 示例，但它似乎不适用于任何浏览器，甚至不在最前沿的版本中（Chrome Canary 或 Opera Next）。

即使在 chrome://flags 处打开“启用实验性画布功能”在 Chrome Canary 中也没有效果。

现场测试：http: //jsbin.com/bocoti/5/edit ?html,output

它说：“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>
于 2015-09-08T07:10:30.403 回答