考虑这段代码:
var deSaturated = deSaturate(greyscaleCtx.getImageData(0, 0, canvasWidth, canvasHeight));
imageData 来自 getImageData 画布函数。
function deSaturate (imageData) {
var theData = imageData.data;
var dataLength = theData.length;
var i = dataLength-1;
var lightLevel;
// Iterate through each pixel, desaturating it
while ( i >= 0) {
// To find the desaturated value, average the brightness of the red, green, and blue values
theData[i] = theData[i+1] = theData[i+2] = (theData[i] + theData[i + 1] + theData[i + 2]) / 3;
// Fully opaque
theData[i+3] = 255;
// returning an average intensity of all pixels. Used for calibrating sensitivity based on room light level.
lightLevel += theData[i]; //combining the light level in the samefunction
i -= 4;
}
imageData.data = theData; //bring back theData into imageData.data - do I really need this?
var r = [lightLevel/dataLength,imageData]
return r;
}
在编写和优化此代码期间,我发现我并不真正了解 js 如何处理例如“theData”变量。正在使用它只是引用 imageData.data 的一种简短方法,在这种情况下,我最终不需要以下代码:
imageData.data = theData
但是我是否要为性能下降(大量的 DOM I/O)付出代价?
或者正在theData = imageData.data
实际复制原始数组(表示为 Uint8ClampedArray),然后我必须将修改后的数据重新分配给imageData.data
.
我想这是基本的 javascript,但我在 MDN 和其他开发人员资源中发现了相互矛盾的代码示例,我真的很想正确理解这一点。
谢谢您的帮助!