Question

Here is the code that works perfectly well in Firefox, but I just do not get why it does not work in Webkit browsers! Note: Im using jQuery to select the canvas element.

    (function()
    {
        flipV=function(imageData)
        {
            var n = new Array();
            var d = imageData.data;
        // loop through over row of pixels
            for (var row=0;row<imageData.height;row++)
            {
            // loop over every column
                for (var col=0;col<imageData.width;col++)
                {
                    var si,di,sp,dp;

                // source pixel
                    sp=(imageData.width*row)+col; 

                // destination pixel
                dp=(imageData.width*((imageData.height-1)-row))+col; 

                // source and destination indexes, will always reference the red pixel
                si=sp*4;
                    di=dp*4;

                    n[di]=d[si]; // red
                    n[di+1]=d[si+1]; // green
                    n[di+2]=d[si+2]; // blue
                    n[di+3]=d[si+3]; // alpha
                }
            }
            imageData.data=n;

            return imageData;
        };

        var imgs = ['/images/myimage.png'];

        var $c=$('#canvas');
        var cxt=$c[0].getContext('2d');


        var w=$c.width();
        var h=$c.height();

        var img1 = new Image();
        img1.onload=function()
        {   
            cxt.drawImage(img1,0,0,img1.width,img1.height,0,0,w,h);
            imageData = flipV(cxt.getImageData(0,0,w,h));
            cxt.putImageData(imageData,0,0)

        };
        img1.src=imgs[0];

    }
)();

Answer 1

Edit: I played with this a little, and got it to work. The problem is when when you set imageData.data = n. It looks like Chrome/WebKit won’t work with a different data array. To make it work, I passed the context object to flipV and called createImageData(imageData.width, imageData.height) to get a fresh ImageData object, set n = newImageData.data, and returned newImageData.

I’ll leave the rest here for reference:

There is an easier and most likely faster way to flip an image though, that will work across domains. You can use the scale function to automatically flip everything anything you draw along the y axis. You just need to be sure to call save() and restore() and remember to adjust the location since everything is flipped.

function drawVFlipped(ctx, img) {
    ctx.save();
    // Multiply the y value by -1 to flip vertically
    ctx.scale(1, -1);
    // Start at (0, -height), which is now the bottom-left corner
    ctx.drawImage(img, 0, -img.height);
    ctx.restore();
}