Javascript image data to multidimensional array performance issues

Question

I wrote a method for converting the canvas image data array into a multidimensional coordinate based array like such:

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;
    }
}

I have tested it out on a smaller scale (10x10 image), however when I move to a larger image, in my case 800x800, it completely crashes the browser(tab). I can understand why, however, I am wondering if there is a more efficient way to go about this.

Any thoughts?

Answer 1

You could do a little less math by taking advantage of the % (modulus) operator like this:

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]];

    }
}​

You'll have to come up with the values for imageHeight and imageWidth, of course.