I have our images hosted on a remote CDN and we want to use blurjs to blur the image for a background effect. When we try and use blur js directly with the remote image javascript cannot read the file and throws a unable to read image data error.

The way i'm currently doing it is regenerating the image in php and then using blurjs, but it is very slow and consumes a lot of resources.

We've tried the css solution too with filters but the browers runs too slow when we do.

1 Answer
1

Your problem is that pixel access in canvas is not allowed for images loaded from a different domain than the one the page is hosted on. What you need is a proxy script that runs on your server which that allows your javascript to load images from other domains via your server. Of course the downside is that all traffic will also run through your server and that the time to retrieve the image will increase (since the image has first to be loaded to your server and then to the client) and there is unfortunately no way around that.

The good news is that this is a problem that Flash developers had to face many years ago already so it has been solved many times: