Javascript ImageData копировать или перемещать производительность - PullRequest
Новая
       43

Javascript ImageData копировать или перемещать производительность

0 голосов
/ 01 марта 2019

Я пишу диаграмму «водопада» для приемника SDR, который отображается на холсте на веб-странице.

Размер холста w = 1000 h = 800 пикселей.Верхняя строка доставляется каждые 50 мс с сервера.Браузер (используя javascript) должен переместить все строки на одну строку вниз, а затем вставить новую строку вверху.Это дает вид водопада, в котором все пиксели движутся сверху вниз.

Работает нормально, но нагрузка на процессор для перемещения пикселя очень высокая, слишком высокая, например, для малины.

Что я делаю: 

var imagedata = context.getImageData(0,0,pixwidth,height-1);
var dataCopy = new Uint8ClampedArray(imagedata.data);
for(i=(dataCopy.length - (2*pixwidth*4)); i>= 0; i--) {
    dataCopy[i+ pixwidth*4] = dataCopy[i];
}

imagedata.data.set(dataCopy);    
// insert new top line
// ....

context.putImageData(imagedata, 0, 0);

Я также пытался напрямую скопировать данные пикселей в imagedata [некоторый индекс], что дает почти такую ​​же плохую производительность.

В другомC-Program Я сделал то же самое с помощью простой операции memcpy, которая очень быстрая.Но что делать в Javascript?Имеется 800.000 пикселей, что составляет 3.200.000 байтов.Как я могу скопировать или переместить их с наилучшей производительностью в Javascript?

1 Ответ

0 голосов
/ 01 марта 2019 

var cv = document.getElementById('cv');
var ctx = cv.getContext('2d');

function draw() {
    ctx.fillStyle = `hsla(${360 * Math.random()}, 100%, 50%, 1)`;
    ctx.fillRect(0, 0, cv.width, 10);
    ctx.drawImage(cv, 0, 10);
}

setInterval(function() { draw() }, 200)
<canvas id="cv" width="800" height="400"></canvas>

После рисования линии сделайте снимок всего холста и перерисуйте его со смещением 10 px по шкале y.Повторите процесс, и вы получите эффект, похожий на водопад.

...