Javascript图像数据解决多维数组性能问题
我编写了一个将画布图像数据数组转换为基于多维坐标的数组的方法,如下所示:Javascript图像数据解决多维数组性能问题,javascript,arrays,canvas,multidimensional-array,getimagedata,Javascript,Arrays,Canvas,Multidimensional Array,Getimagedata,我编写了一个将画布图像数据数组转换为基于多维坐标的数组的方法,如下所示: parse: function() { var x = y = 0; var step = 0; for(var i = 0; i <= this.imageData.length - 4; i += 4) { if(step == this.width) { ++ y; step = 0; } t
parse: function() {
var x = y = 0;
var step = 0;
for(var i = 0; i <= this.imageData.length - 4; i += 4) {
if(step == this.width) {
++ y;
step = 0;
}
this.data[x][y] = [this.imageData[i],
this.imageData[i+1],
this.imageData[i+2],
this.imageData[i+3]];
++ x;
++ step;
}
}
parse:function(){
var x=y=0;
var阶跃=0;
对于(var i=0;i,您可以通过利用%
(模数)运算符来少做一点数学运算,如下所示:
var floor = Math.floor; // store a reference to Math.floor, anything goes when you have 640,000 iterations
parse: function(imageHeight, imageWidth) {
for(var i = 0; i < this.imageData.length; i++) {
this.data[i % imageWidth][Math.floor(i/imageHeight)] = [this.imageData[i],
this.imageData[i+1],
this.imageData[i+2],
this.imageData[i+3]];
}
}
var floor=Math.floor;//存储对Math.floor的引用,当您有640000次迭代时,任何事情都会发生
解析:函数(imageHeight、imageWidth){
对于(var i=0;i
当然,您必须为imageHeight
和imageWidth
提供值。我非常喜欢这个解决方案,但是我似乎得到了未定义的数据console.log(this.data[0][360])
我希望在哪里有一个数组。有什么想法吗?啊,这个解决方案似乎不正确地增加了数组。它每四个像素增加一次是这个.data[0][0],这个.data[4][0],这个.data[8][0]等等。
啊哈,那就可以了。顺便说一句,我已经再次更新了我的答案,以挤出for循环的最后一点速度让我看看我是否能看到迭代出现了什么问题。@Headspin:啊,找到了。我复制了你的for循环,然后更改了逻辑,这样就不再需要增加4。再次检查答案。这里有2个问题。图像数据数组由[r,g,b,a,r,g,b,a…]
因此每四个像素组成一个像素。此外,虽然这会得到所有x位置(此.data[0..799]
),但每个x只有40个y(此.data[x][0..39]
)。