Can you blur an image?

[William Jamieson]

I just got an iPhone and I am finding that it is everso more important to have blurred images in design. It is even suggested in the iOS 9 guidelines. However, I would like to know the most efficient way to blur images in our apps.

I first started with the livecode tutorial for this @ http://lessons.runrev.com/m/4071/l/2658 ... r-an-image, but I could not find a version of LiveCode that could successfully complete the blur with a PC, let alone a poor old iPhone.

Then I found this API that does it for you, https://www.blitline.com/ and includes a number of functions along with it that are really cool. However, it is going to eat up cash and it would be cool to not have to spend money to process data.

I know there is http://www.imagemagick.org/ which seems to be the open source standard on the web but it is in C and would need to be wrapped.

Do you know of anyone or any projects that could help in this department??

-Will

[William Jamieson]

Ok, all you guys probably want to know what you can do here... So I have two solutions for you. Hopefully more people are able to contribute to this.

1) In LiveCode, you can layer images. Here is the code I used to produce a really nice blur affect that is quite fast. (Works with the animation engine)

Code: Select all

constant kBlur = 3


on DeleteT
   lock screen
   repeat with x = 1 to 16
      delete img ("imag" && x) of me
   end repeat
   unlock screen
end DeleteT

on mouseUp
   lock screen
   put the loc of img "image" of me into tLoc
   export snapshot from img "image" of me to tImage as JPEG
   
   put 8 into tTotal
   repeat with x = 1 to tTotal
      copy the templateimage to this card
      set the name of it to ("imag" && x)
      put tImage into img ("imag" && x) of me
      set the blendlevel of it to 80
      put pointOnCircle(tLoc, (x * (360/ tTotal)), kBlur) into tL
      set the loc of it to tL
   end repeat
   
   repeat with x = 1 to tTotal
      copy the templateimage to this card
      set the name of it to ("imag" && 8+x)
      put tImage into img ("imag" && 8+x) of me
      set the blendlevel of it to 90
      put pointOnCircle(tLoc, (x * (340/ tTotal)), kBlur * 2) into tL
      set the loc of it to tL
   end repeat
   
   put the size of it
   
   unlock screen
end mouseUp

2) There is a CDN that does image and video processing for you called http://cloudinary.com/

You can ask for the image back blurred, black & white, gradient, sharpen w/e you like, and with the video you can do fade, text captions, audio transformations, etc. This service looks pretty robust and really legit. Assuming your app works off the cloud.

Please feed more ideas into this post. Thanks!

-Will