0

I am trying to use stackBlur (http://www.quasimondo.com/StackBlurForCanvas/StackBlurDemo.html) to blur entire image with stackBlurImage( 'srcimg', 'canvas', 10, false );. But neither it's working on local system nor on internet. Could someone please suggest me correct way of doing it?

Here is my jsFiddle - http://jsfiddle.net/yesprasoon/3KxrW/

Or please let me know any other way of blurring the image. CSS transition is not working in Phonegap for Android webkit.

UPDATE

Image was not getting blurred due to some '..because the canvas has been tainted by cross-origin data' error. I was testing it as local file in Chrome. Script runs fine with chrome:localhost/IE9/FF.

Prasoon
  • 435
  • 1
  • 9
  • 23

1 Answers1

1

The reason is that you are not allowed to access and modify an image (with a canvas), unless it is hosted on the same server as your webpage.

See here for more details.

If the image is hosted alongside the webpage, then there is no problem using the code you provided (e.g. stackBlurImage("srcimg", "canvas", 5, false);).

See, also, this short demo.

Community
  • 1
  • 1
gkalpak
  • 47,844
  • 8
  • 105
  • 118
  • I used an image url to display it on jsfiddle. In my local files I am using ''. What could be the problem? – Prasoon Oct 27 '13 at 13:01
  • I can't tell, if I don't see for myself. Is this publicly available ? – gkalpak Oct 27 '13 at 13:06
  • I'll try to make it public. I don't get that alert in my local files. Just to confirm - my problem is not 'can not access image' alert - but my problem is that it is not getting blurred. Am I writing correct code to blur with stackBlur? – Prasoon Oct 27 '13 at 13:18
  • Thanks! I was facing problem as I was using Chrome. There was some error in DevTools like '..because the canvas has been tainted by cross-origin data'. In IE9 and FireFox everything was fine. – Prasoon Oct 28 '13 at 09:18
  • Is the problem solved now ? Or is it still not working in Chrome ? – gkalpak Oct 28 '13 at 11:32
  • If it does not work in Chrome then it is not solved :) I tried my demo above in Chrome and it works fine. What does not work for you ? – gkalpak Oct 30 '13 at 07:43
  • Well as I had updated the answer earlier - it works in IE/FireFox normally. Also, it works in Chrome Localhost (http://localhost/). But it does not work in Chrome locally (file:///) - and I was testing it in Chrome and that too locally. When I tested the same by putting my files into localhost - it worked fine. It works fine with Phonegap and webView as well. Just to repeat - it works correctly with IE/FF locally (i.e. without localhost). – Prasoon Nov 01 '13 at 05:42