Basically, this plugin is responsible for this really neat effect: /

But when I try to implement it on my site in chrome I get this error message in my console:

Unable to get image data from canvas because the canvas has been tainted by cross-origin     
data. demo.html:1
Uncaught Error: unable to access image data: Error: unable to access local image data:    
ReferenceError: netscape is not defined 

Implementation below:

$('.navbar').blurjs({
    source: 'body',
    overlay: 'rgba(0,100,100,0.1)'
}); 

What's really annoying is the same error pops up in his example file! So what's going on? Tested in chrome and opera and firefox. Exactly the same errors in his example file.

Same error in a jsfiddle:

/

I even downloaded his whole site, and though it works online, locally the identical files get this error. Very strange. Very disappointing, looked like a great library. Be very grateful if someone could find a fix.

This images below show the untouched files, forked straight from github, so what's going on?

Basically, this plugin is responsible for this really neat effect: http://www.blurjs./

But when I try to implement it on my site in chrome I get this error message in my console:

Unable to get image data from canvas because the canvas has been tainted by cross-origin     
data. demo.html:1
Uncaught Error: unable to access image data: Error: unable to access local image data:    
ReferenceError: netscape is not defined 

Implementation below:

$('.navbar').blurjs({
    source: 'body',
    overlay: 'rgba(0,100,100,0.1)'
}); 

What's really annoying is the same error pops up in his example file! So what's going on? Tested in chrome and opera and firefox. Exactly the same errors in his example file.

Same error in a jsfiddle:

http://jsfiddle/8QeAQ/7/

I even downloaded his whole site, and though it works online, locally the identical files get this error. Very strange. Very disappointing, looked like a great library. Be very grateful if someone could find a fix.

This images below show the untouched files, forked straight from github, so what's going on?

• javascript
• static-libraries

• 1 I think because the image you're using is from a different origin. Can you see what happens if the image is on the same server as the HTML? – sje397 Commented Jul 19, 2013 at 10:05
• @sje397 I see where you're ing from with regards the jsfiddle, but when I test locally, with the images in the same directory as the HTML even, it still doesn't work, so that doesn't seem to be it. I think it's something to do with this: ReferenceError: netscape is not defined – Starkers Commented Jul 19, 2013 at 10:39
• 1 Sometimes errors like that e up when testing locally - e.g. I have a lot of problems with Chrome trying to use local cookies. – sje397 Commented Jul 20, 2013 at 6:47
• 1 Well, I wish Chrome would say that rather than give you some very vague errors messages regarding images. – Starkers Commented Jul 20, 2013 at 10:04
• 1 @Starkers I just had a movie moment and brought the screen to within like an inch of my face to read the filepath in your pencils screenshot because my name is Julian too and I'm having the same problem and I was like "WAIT HAVE I DONE THIS BEFORE IS THIS ME??" – temporary_user_name Commented Sep 25, 2013 at 23:50

4 Answers 4

Try uploading it to a remote puter. It sounds like the error is to do with mixing origins (specifically, the image is from a different origin than the html/javascript). That can be a problem when testing locally also, because browsers often don't trust local stuff either.

I think this is because the Cross-domain issues on your page with the image files.

Blur.js use the getImageData() method to get image data. getImageData() method requires that the image is hosted on a web server with the same domain as the code executing it.

For example, the page from a.example., will not be allowed to use getImageData() method to get the data of image which references from other domain such as b.example., even they pointed to the same web server;

Just before tempImg.src = formattedSource; add tempImg.crossOrigin = '';///=anonymous this will solve the problem!

tempImg.crossOrigin = '';///=anonymous
tempImg.src = formattedSource;

Blur.js is written in a way which does not allow it to access local files on your system if you launch your JavaScript locally (file//:). It only works if your script and image files are on a web server (http//:).

You can use WampServer to create a localhost server and test your website on your machine. Just install it, place your files into its www directory, and open http//:localhost/"yourFile".