2012-11-21 23 views
2

是否可以使用http://www.blurjs.com模糊遠程圖像?使用blur.js(blurjs.js)模糊遠程託管的圖像

我將圖片託管在遠程CDN上,我們希望使用blurjs來模糊背景效果的圖像。當我們嘗試直接使用模糊js與遠程圖像時,javascript無法讀取文件並拋出無法讀取圖像數據錯誤。

我現在正在做的方式是在php中重新生成圖像,然後使用blurjs,但它非常緩慢並消耗大量資源。

我們也嘗試過使用過濾器的CSS解決方案,但瀏覽器運行時速度太慢。

有沒有人有解決方案?

回答

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