使用Javascript从非钳位数组高效生成钳位数组

我有一个比较两个图像的代码。要获取图像的画布数据，我使用以下方法：

 const canvasOneImageData = canvasOneContext.getImageData(0, 0, canvasOne.width, canvasOne.height);

我的目标是构造一系列的

rgba

uint8clampedarray

来表示这个缓冲区中的每个像素。我目前使用以下方法：

const canvasOneBuffer = new Uint8Array(canvasOneImageData.data.buffer);
// within an x/y loop:
const newPixel1Data0 = canvasOneBuffer[4 * (x + y * canvasOne.width) + 0]; // r
const newPixel1Data1 = canvasOneBuffer[4 * (x + y * canvasOne.width) + 1]; // g
const newPixel1Data2 = canvasOneBuffer[4 * (x + y * canvasOne.width) + 2]; // b
const newPixel1Data3 = canvasOneBuffer[4 * (x + y * canvasOne.width) + 3]; // a
const pixel1Data = new Uint8ClampedArray(4);
pixel1Data[0] = newPixel1Data0;
pixel1Data[1] = newPixel1Data1;
pixel1Data[2] = newPixel1Data2;
pixel1Data[3] = newPixel1Data3;

但这似乎有点迟钝。有没有办法创建新的

Uint8ClampedArray（4）从缓冲区阵列进行一次读取，然后对新阵列进行一次写入

我知道我可以使用
canvasOneBuffer.slice（0，4）
——但这仍然需要一个逐段固定的数组组合。性能是这里最大的优先事项，因为这将每秒执行数百次

var pixelData=canvasOneImageData.data;

图像数据在js中已经是固定数组。我认为最好以四个字节的方式对其进行迭代：

for(var i=0;i<pixelData.length-3;i+=4){
  var pixel1=pixelData[i];
  var pixel2=pixelData[i+1];
  var pixel3=pixelData[i+2];
  var pixel4=pixelData[i+3];
  //...
}

请注意，这指的是同一个缓冲区。因此，性能确实很高，但它不是副本，因此修改也会修改图像。如果你不想要这个，可以使用。切片

你所说的“逐段夹紧阵列组合”是什么意思？另外，你能解释一下你想用这段代码做什么吗；如果真的有必要钳制它，我不是舒尔…@4castle-添加了一些背景，尽管我认为这不会有多大帮助。我的意思是，我仍然必须将像素数据单独推入钳制数组（我想无论如何）。@Jonasw我不确定你想说什么，但我确实需要钳制数组。CanvasonImageData.data已经包含钳制数组。因此，如果这是0-4，您是否可以将算法更改为只检查特定部分？我有点困惑-给定64像素，
canvasOneImageData.data
有256个条目。我正试图以最快的方式创建64个钳制子阵列。你是说用
子数组来做
0,4
，
5,8
等吗？我只是需要阅读；我不会修改像素数据。@SB2055只是为了在大钳制阵列上进行循环？我的想法是我有两个图像，并比较每个图像上的像素。比较函数-
像素差异（p1，p2）
-需要两个Uint8CLampedArray（4）来表示像素（rgba）。所以我需要读取缓冲区并生成这些子数组以传入-一次传入一个子数组。@SB2055像素差异应该做什么，整个代码应该做什么？我认为这是可以优化的。如果缓冲区保持不变，创建子阵列的速度相当快，但是，如果在这种情况下确实需要，我不是舒尔。你能不能只做像素区分（Apixel1，Apixel2，Apixel3，Apixel4，Bpixel1…）或者内联函数？
var pixel1Data=canvasOneImageData.data.subarray(0,4);