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 に答える