[RESOLVED] putImageData always blank after pixel-by-pixel processing

[vinylcyril]

Hello all.
I'm quite new to HTML5, so i guess i'm just doing something wrong. What exactly is wrong is beyond me
So, i have a canvas element with an image already put onto it by the "drawImage" function.
Then i implement this seemingly easy piece of code:

function imgInvert(canvas_ID)
{
    var imgD = document.getElementById(canvas_ID).getContext("2d").createImageData
                (
                    document.getElementById(canvas_ID).width, 
                    document.getElementById(canvas_ID).height
                );
                
    for (var i = 0; i < imgD.data.length; i += 4) 
    {
        imgD.data[i  ] = 255 - imgD.data[i  ]; // red
        imgD.data[i+1] = 255 - imgD.data[i+1]; // green
        imgD.data[i+2] = 255 - imgD.data[i+2]; // blue
        // leaving the alpha channel as it is
    }
    
    document.getElementById(canvas_ID).getContext("2d").putImageData(imgD, 0, 0);
} 

and after the "putImageData" method is implemented, i'm left with a blank canvas instead of at least something.

Moreover, this part of code is basically ripped off this tutorial.
Somehow, there it works. On my page, it doesn't so far.

Any help will be much appreciated!

[Fang]

Change:

    var imgD = document.getElementById(canvas_ID).getContext("2d").createImageData
                (
                    document.getElementById(canvas_ID).width,
                    document.getElementById(canvas_ID).height
                );

to:

var c =document.getElementById(canvas_ID);
var imgD = c.getContext("2d").getImageData(0, 0, c.width, c.height);

[vinylcyril]

Thanks for stopping by!

Sadly, with this code, i'm getting an "Uncaught Error: SECURITY_ERR: DOM Exception 18" on the line var imgD = c.getContext("2d").getImageData(0, 0, c.width, c.height);
(testing in Google Chrome 5.0.375.99)

Mozilla Firefox also sits there not doing anything and displays the following in the error console:
Error: uncaught exception: [Exception... "Security error" code: "1000" nsresult: "0x805303e8 (NS_ERROR_DOM_SECURITY_ERR)" location: "file:///Z:/Personal/Webdes/editor/desktop/script.js Line: 107"])

I googled the error and couldn't find a direct explanation of what it might mean

[Fang]

The basic code runs correctly in Chrome. The error is due to some other code you are using.
Give a link or full code.

[vinylcyril]

Sorry for the delay, i've been quite busy these days, unfortunately...
And thanks for taking your time to look into this issue.

I found out that the method you suggested works only if the file is placed on a host, such as this. This is perfect, i couldn't thank you enough!
However, it fails to work if the file is in a local folder (like file:///Z:/Personal/test02.php). It "finds canvas" and fails with the above mentioned error right after that.

I have a feeling that createImageData does create a blank array indeed, but for some reason it works well in the tutorial i previously gave a link to...
Here's the initial file and here's the tutorial again.

OK, that question bothers me much less now All in all, i still have one tiny question: why does the method you suggested work when placed on a remote server and doesn't work when it's in a local folder?
It sure doesn't need to process server-side, right?

[Fang]

afaik it is a security issue. canvas can only access server images.
You will have to upload the image to the server first.

[vinylcyril]

Fang, a million thanks for everything!