外部JavaScript库错误。 （Blur.js）

Question

基本上，这个插件负责这个非常好的效果： http://www.blurjs.com/

但是当我尝试在Chrome网站上实现它时，我在控制台中收到此错误消息：

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 

以下实施：

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

真正令人讨厌的是他的示例文件中弹出了同样的错误！发生什么了？在chrome和opera和firefox中测试过。 他的示例文件中的错误完全相同。

jsfiddle中的相同错误：

http://jsfiddle.net/8QeAQ/7/

我甚至下载了他的整个网站，虽然它可以在线工作，但是本地相同的文件会出现此错误。很奇怪。非常令人失望，看起来像一个很棒的图书馆。如果有人能找到解决办法，请非常感激。

下面的图片显示了未经编辑的文件，直接从github分叉，所以发生了什么？

Answer 1

尝试将其上传到远程计算机。听起来这个错误与混合起源有关（具体来说，图像来自与html / javascript不同的来源）。在本地测试时，这可能是一个问题，因为浏览器通常也不信任本地的东西。

Answer 2

我认为这是因为您的网页上的Cross-domain问题与图片文件有关。

Blur.js使用getImageData()方法获取图像数据。 getImageData()方法要求图像托管在Web服务器上，该域与执行它的代码具有相同的域。

例如，来自a.example.com的页面将不允许使用getImageData()方法获取从b.example.com等其他域引用的图像数据，即使他们指向相同的Web服务器;

Answer 3

如果在本地启动JavaScript（文件// :)，Blur.js的编写方式不允许它访问系统上的本地文件。它仅适用于脚本和图像文件位于Web服务器（http // :)上的情况。

您可以使用WampServer创建本地主机服务器并在您的计算机上测试您的网站。只需安装它，将文件放入其www目录，然后打开http //：localhost /＆＃34; yourFile＆＃34;。

Answer 4

在tempImg.src = formattedSource;添加tempImg.crossOrigin = '';///=anonymous之前，这将解决问题！

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