使用模糊.js (blurjs.js) 对远程托管的图像进行模糊处理



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

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

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

我们也尝试过带有过滤器的 css 解决方案,但当我们这样做时,浏览器运行得太慢了。

有人有解决方案吗?

您的问题是,对于从与托管页面的域不同的域加载的图像,不允许在画布中进行像素访问。您需要的是在服务器上运行的代理脚本,该脚本允许您的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

最新更新