Как использовать HTML5 и transferControlToProxy?

Я работаю над приложением JS, которые используют холст, чтобы манипулировать изображение (т.е. и конвертировать в PNG/base64 с .toBlob() и .toDataURL().Как использовать HTML5 и transferControlToProxy?

Я хотел бы использовать .transferControlToProxy() позволить работнику выполнять работу и получить гладкую GUI.

Но это, кажется, не поддерживается ... as they said on Mozilla devs

Некоторые из вас есть другая информация? Может быть, обходной путь?

источник

2015-01-26 OBS Conferencing

Не уверен, что о производительности, но вы пробовали передать данные пикселя из ['getImageData'] (https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D.getImageData) вашему работнику? – James

Да, да. Идеально подходит для обработки изображений. К сожалению, у меня мало лечения, но много изображений: toBlob() и toDataURL() - это методы холста (т. Е. Не вызываемые из рабочего :() –

Создание веб-рабочих, полезных с холстом html5, всегда было ограничено из-за количества данных, которые должны быть отвлекаясь от рабочего и от рабочего. Предоставление веб-работникам прокси контекста будет иметь большое значение для решения узкого места маршаллинга. Я слежу за усилиями по прокси-контексту, но на данный момент, ИМХО, я пришел к выводу, что это еще не – markE

У Whatwg.org есть образец javascript использования canvas.transferControlToProxy() в https://developers.whatwg.org/the-canvas-element.html#dom-canvas-transfercontroltoproxy, но он не работает в любом браузере, даже не в кратковременных версиях (Chrome Canary или Opera Next).

Даже поворот «Включить возможности экспериментального холста» при хром: // флаги не действуют в Chrome Canary.

Тест жить: http://jsbin.com/bocoti/5/edit?html,output

Он говорит: "TypeError: canvas.transferControlToProxy не является функцией".

Это было бы очень хорошим дополнением. Подумайте о том, чтобы рисовать все на холсте у рабочего и сделать blob/arraybuffer/dataurl холста и перенести его в основной поток с помощью переносимых объектов. В настоящее время, если вы хотите сделать что-то на холсте, используя функцию холста (заливки(), 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-08 07:10:30

Как использовать HTML5 и transferControlToProxy?

ответ

Смежные вопросы