As of this writing, LiveCode doesn’t provide any native blur effects for images, but using a simple image scaling technique, you can blur an image with decent results. The final result won’t be as smooth and even as using a dedicated image editor like Adobe Photoshop, but with the right image and a little tweaking, you can achieve a passable blur effect.

Here’s the script. It includes a small bit of drama by revealing the blurred result with a dissolve effect. To use the script in your own stack, pass the long id of the image you want to blur to the blurImage command, like this: blurImage (the long id of image 1)

command blurImage pImage
   lock screen for visual effect
   set the sourceData of pImage to the text of pImage — SAVE SOURCE
   put the width of pImage into W
   put the height of pImage into H
   put the rect of pImage into theRect
   put theRect into theOriginalRect
   put item 1 of theRect + (W*thePercent) into item 3 of theRect
   put item 2 of theRect + (H*thePercent) into item 4 of theRect
   set the resizeQuality of pImage to best
   set the rect of pImage to theRect
   set the imageData of pImage to the imageData of pImage
   set the rect of pImage to theOriginalRect
   set the imageData of pImage to the imageData of pImage
   unlock screen with visual dissolve very fast
end blurImage

How It Works
First, the script stores the original data of the image into a custom property, just in case you want to revert the blurred image back to its original content. Then the image is shrunk down to a specified percentage of the original size, the image’s content is replaced with its current imageData, and finally, the image is returned to its original size. The resizeQuality is set to best here to make the smoothest possible blur.
If the final result is not to your liking, you can try modifying the percentage value at the top of the script. Note the larger the percentage, the less blur will be introduced into the image.
To revert the image to its original state, simply set the image’s text property to its sourceData property.
set the text of image "myBlurredImage" to the sourceData of image "myBlurredImage"
If you don’t need to revert an image once it’s been blurred, you can delete the sourceData custom property using LiveCode’s Inspector, or you can simply set the sourceData property of the image to empty. This will save some filesize in your stack.
As explained above, the result of the effect won’t be as smooth as a true Gaussian blur, so you may want to try playing with the percentage value to get different results. There’s not really any predictable formula we can use because the content of the image will affect the results. Also, the larger the image, the longer LiveCode will take to process the image. If you don’t need to blur images on command, consider pre-blurring them and storing them in your stack (or as external files) before displaying them.

(Visited 591 times, 1 visits today)