Кодът и обяснението на @webmasters са актуализирани; надявам се, че това трябва да отговаря на вашите нужди =]

person Nuoun    schedule 13.04.2013    source източник


Отговори (2)


Проблемът е, че итерирате всеки пиксел в родителската картина. Ако ограничите итерацията до по-малкото от двете изображения, нещата ще бъдат много по-бързи. Освен това, ако подредите чертежа с плочки, всяка плочка може да се обработва в отделен уеб работен инструмент, като по този начин се увеличи палетизацията на всяка секция от изображението. Написах това: http://robertleeplummerjr.github.io/CanvasWorker/, което прави точно това, което искате .

person Robert Plummer    schedule 04.05.2015

Всъщност опитах същото в този експеримент, това е филтър за изместване:

http://www.soundstep.com/blog/experiments/displacement-js/heart/ http://www.soundstep.com/blog/2012/04/25/javascript-displacement-mapping/

Създадох работник във филтъра и изчислявам пиксела заедно, преди да ги публикувам обратно в основното приложение. По принцип итериране на всички пиксели в работния файл.

Преди работния имам в цикъл 4 getImageData, това не може да се направи в работния. Отнема около 15% CPU на chrome, независимо от всичко.

И така, като цяло получавам 70% CPU без работника и получавам 90% CPU с работника.

Предполагам, че действията, които не могат да бъдат извършени в работния файл, като "getImageData" И "putImageData", плюс факта, че има самия работник, отнемат повече CPU, отколкото липсата на работник.

Вероятно би било по-добре, ако можем да изпратим други типове данни, за да можем да направим getImageData и putImageData вътре в работния файл.

Не съм сигурен, че има друг начин за изпращане и получаване на байтове за обработка и реконструкция на съдържанието на платното.

http://typedarray.org/concurrency-in-javascript/

person Soundstep    schedule 08.07.2013