[RESOLVED] putImageData always blank after pixel-by-pixel processing
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:
var imgD = document.getElementById(canvas_ID).getContext("2d").createImageData
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
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
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?