1

基本上，这个插件负责这个非常整洁的效果： 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 分叉的未修改文件，那么发生了什么？

错误信息

目录结构

4

4 回答 4

3

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

于 2013-07-21T10:57:17.117 回答
2

我认为这是因为Cross-domain您页面上的图像文件存在问题。

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

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

于 2014-12-25T03:22:35.650 回答
2

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

tempImg.crossOrigin = '';///=anonymous
tempImg.src = formattedSource;
于 2016-05-04T12:53:46.240 回答
1

如果您在本地启动 JavaScript (file//:)，Blur.js 的编写方式不允许它访问系统上的本地文件。仅当您的脚本和图像文件位于 Web 服务器 (http//:) 上时，它才有效。

您可以使用WampServer创建一个 localhost 服务器并在您的机器上测试您的网站。只需安装它，将文件放入其 www 目录，然后打开 http//:localhost/"yourFile"。

于 2014-11-05T00:54:48.657 回答