Javascript getImageData for canvas html5

Question

I've tearing my hair out! I got this working, thought 'i can afford not to save a version of this', then i .. broke the 'build'.

The line myImageData = context.getImageData(0, 0, canvas.width, canvas.height); seems to breaking this, as an alert will work before, but not after it.

The image itself is loading.

Any and all suggestions welcomed ^_^ I'm at tether's end, and going to get RSI from kicking myself soon.

var myImageData;

var image_var = new Image();
image_var.onload  = function () {
    canvas.width  = image_var.width;
    canvas.height = image_var.height;
    context.drawImage(image_var, 0, 0, image_var.width, image_var.height);
    myImageData   = context.getImageData(0, 0, canvas.width, canvas.height);
    alert('');
}
image_var.src = "example1.jpeg";

Answer 1

Add below piece of code to your actual code, firefox allows you to work locally

netscape.security.PrivilegeManager.enablePrivilege("UniversalBrowserRead");

what actually it does ?

When the script calls this function, if the signature is valid or codebase principal are enabled, expanded privileges can be granted. If a user has not accessed this principal before, a dialog asks the user if he wants to accept the signed code. Unlike Communicator 4.x, Mozilla does not display a detailed Java grant dialog, rather a simple dialog asking if the principal can be trusted. The user can accept or deny and allow their choice to be remembered by the browser. As shown in the second example, two privileges may be asked for at once, so only one dialog appears.

Privileges are granted only in the scope of the requesting function. This scope includes any functions called by the requesting function. When the script leaves the requesting function, privileges no longer apply.

You can read more about it here

Here's a demo

Answer 2

I found a solution - the problem was that I was attempting to read local files(ie, on my computer), which don't have a domain name associated with them (apparently local ip doesn't count in this instance). To protect the security of interests of people with online content, the W3C + browsers have made it so that getImageData() doesn't work on files stored outside of the server that's home to the javascript.

Unfortunately, it treats local files as domainless, and so the security restrictions apply, apparently. I'm looking around for ways to overcome this problem (looking at appCache and websql in HTML5 at the moment, may or may not bear fruit). I'd prefer for the user of my web app not to have to upload the material they're working with (so they can work offline, and for security reasons). Any suggestions welcome!