Question

我有一个电子应用程序，在那里我通过串行端口从相机接收一些数据，然后使用画布显示它们。

我想使用双线性插值，因为接收到的数据只有64个像素。我的问题是插值功能太慢，无法与通过串行接收的数据保持同步，因此它会滞后并且不再实时。

有什么想法可以做得更快吗？这是函数：

let imgData = ctx.getImageData(0, 0, width, height);
let data = imgData.data;
for i {
  for j {
    //The size of a block is 64 pixels
    let indexX = Math.floor(j / (64 * 4));
    let indexY = Math.floor(i / 64);

    let Q11 = {
      x: index_X * 64,
      y: index_Y * 64,
      value: parseFloat(PixelData[indexX + indexY * 16])
    };

    let Q12 = {
      x: index_X * 64,
      y: (index_Y + 1) * 64,
      value: parseFloat(PixelData[indexX + (indexY + 1) * 16])
    };

    let Q21 = {
      x: (index_X + 1) * 64,
      y: index_Y * 64,
      value: parseFloat(PixelData[(indexX + 1) + indexY * 16])
    };

    let Q22 = {
      x: (index_X + 1) * 64,
      y: (index_Y + 1) * 64,
      value: parseFloat(PixelData[(indexX + 1) + (indexY + 1) * 16])
    };

    let R1 = Q11.value * ((Q21.x - (j / 4)) / 64) + Q21.value * (((j / 4) - Q11.x) / 64);
    let R2 = Q12.value * ((Q22.x - (j / 4)) / 64) + Q22.value * (((j / 4) - Q12.x) / 64);
    let MLXTempInterpolated = R1 * ((Q12.y - i) / 64) + R2 * ((i - Q21.y) / 64);
    let tempIndex = TempMap(MLXTempInterpolated, minTemp, maxTemp, 120) //This is pretty fast
    try {

      data[j + i * ((64 * 15 + 1) * 4) + 0] = colorPalette[tempIndex].r //r
      data[j + i * ((64 * 15 + 1) * 4) + 1] = colorPalette[tempIndex].g //g
      data[j + i * ((64 * 15 + 1) * 4) + 2] = colorPalette[tempIndex].b //b
      data[j + i * ((64 * 15 + 1) * 4) + 3] = 255 //alfa

    } catch (err) {
      //console.log(err)
    }

  } //for j
} // for i
// put the modified pixels back on the canvas
ctx.putImageData(imgData, 0, 0);

Answer 1

双线性插值会不会为您绘制到另一张画布上？

var canvas2 = document.createElement('canvas');
var ctx2 = canvas2.getContext('2d');
canvas2.width = canvas2.height = 1024;
ctx2.drawImage( canvas, 0, 0, 1024, 1024 );

双线性插值函数太慢-Javascript

1 个答案: