使用blur.js(blurjs.js)模糊远程托管的图像

时间:2012-11-21 12:48:59

标签: javascript jquery css image blur

是否可以使用http://www.blurjs.com模糊远程图像?

我将图像托管在远程CDN上,我们希望使用blurjs来模糊图像以获得背景效果。当我们尝试直接使用模糊js与远程图像javascript无法读取文件并引发无法读取图像数据错误。

我目前正在做的方式是在php中重新生成图像,然后使用blurjs,但它非常慢并且消耗了大量资源。

我们也尝试过使用过滤器的css解决方案,但是当我们这样做时,浏览器的运行速度太慢了。

有人有解决方案吗?

1 个答案:

答案 0 :(得分:1)

您的问题是,对于从与托管页面的域不同的域加载的图像,不允许使用画布进行像素访问。您需要的是在您的服务器上运行的代理脚本,它允许您的javascript通过您的服务器从其他域加载图像。当然,缺点是所有流量也将通过您的服务器运行,并且检索图像的时间将增加(因为图像首先被加载到您的服务器然后再加载到客户端)并且遗憾的是没有办法解决这个问题。

好消息是,这是Flash开发人员多年前必须面对的一个问题,因此它已经解决了很多次:

以下是一个php脚本:http://www.abdulqabiz.com/blog/archives/2007/05/31/php-proxy-script-for-cross-domain-requests/

这是Node.js http://codelikebozo.com/creating-an-image-proxy-server-in-nodejs

中的最新实现