How to blur text or image
How to blur text or image
How to blur text or image? Blurring a text or image on a web page is quite easy. Text blur or image blur can be done in many ways including applying a PHP filter on the fly or adding a filter in CSS.
In any case, blurring images and pictures is usually safe; however, it is important to say that sensitive or personal information should never be provided on the web even if blurred. Below you can find techniques to blur image or blur text.
Blur text
Blur text is very easy with CSS. You can add blur to your text to add some life to it. When talking about blurring text, let's demonstrate what we mean. The following is a span that has been blurred with CSS:
This is the code that was used to blur the text above:
<span style="width: 257; height: 50; font-size: 16pt; color: blue; Filter: Blur(Add = 1, Direction = 50, Strength = 7)">Text blurred with CSS</span>
Neat, isn't it?
What if I want to blur the whole page?
Blur text on the whole page is as easy as blurring a simple div. The only difference is that you have to assign ID to the body tag.
<html>
<head>
<title></title>
</head>
<body id="blur">
<a href="#" onclick="document.getElementById('blur').style.filter='blur(add=0, direction=225, strength=10)';return false;">blur this page</a>
<a href="#" onclick="document.getElementById('blur').style.filter='none';return false;">unblur this page</a>
<body>
</html>
The code above results in the whole page being blurred. Try it out here: BLUR THE WHOLE PAGE.
How to blur image - PHP imagefilter
There is one neat function in PHP which will do image blur for you. The function is called imagefilter with the IMG_FILTER_SELECTIVE_BLUR parameter. The following is an example of what you start with and what you get after you run your picture through the function:
<?php
echo "Image before blurring: <img src=\"blurimg.jpg\" /><br /><br />";
$im = imagecreatefromjpeg("blurimg.jpg");
if($im && imagefilter($im, IMG_FILTER_SELECTIVE_BLUR))
{
imagejpeg($im, "blurimg2.jpg");
echo "Image blurred: <img src=\"blurimg2.jpg\" /><br />";
}
else
{
echo "Image blur failed.";
}
imagedestroy($im);
?>
This function will blur the image on the fly. The disadvantage of this blur image method is that it does not give us options to adjust the degree of blurring.
Blur image with CSS
Another way to blur image is to use CSS, specifically so-called CSS Motion Blur filter.
<img src="images/blurimg.jpg" style="Filter: Blur(Add = 0, Direction = 225, Strength = 5)">
Here you can see what happens after applying the image blur CSS method.
You can see that this method allows you to select the direction and also the strength of the blur.
Blur image with PHP - pixel by pixel
Applying the PHP image filter is not very flexible. Another way to blur pictures is to iterate through each pixel in a picture and read the color value of all pixels surrounding it. The new color for each pixel is the average of its own plus the colors of those pixels around it.
<?php
function blur (&$image) {
$imagex = imagesx($image);
$imagey = imagesy($image);
$dist = 2;
for ($x = 0; $x < $imagex; ++$x) {
for ($y = 0; $y < $imagey; ++$y) {
$newr = 0;
$newg = 0;
$newb = 0;
$colours = array();
$thiscol = imagecolorat($image, $x, $y);
for ($k = $x - $dist; $k <= $x + $dist; ++$k) {
for ($l = $y - $dist; $l <= $y + $dist; ++$l) {
if ($k < 0) { $colours[] = $thiscol; continue; }
if ($k >= $imagex) { $colours[] = $thiscol; continue; }
if ($l < 0) { $colours[] = $thiscol; continue; }
if ($l >= $imagey) { $colours[] = $thiscol; continue; }
$colours[] = imagecolorat($image, $k, $l);
}
}
foreach($colours as $colour) {
$newr += ($colour >> 16) & 0xFF;
$newg += ($colour >> 8) & 0xFF;
$newb += $colour & 0xFF;
}
$numelements = count($colours);
$newr /= $numelements;
$newg /= $numelements;
$newb /= $numelements;
$newcol = imagecolorallocate($image, $newr, $newg, $newb);
imagesetpixel($image, $x, $y, $newcol);
}
}
}
echo "Image before blurring: <img src=\"blurimg.jpg\" /><br /><br />";
$im = imagecreatefromjpeg("blurimg.jpg");
blur($im);
imagejpeg($im, "blurimg2.jpg");
echo "Image blurred: <img src=\"blurimg2.jpg\" /><br />";
imagedestroy($im);
?>
The function provided above produces the following output:
Increase the dist parameter to increase the degree of blur.
Why blurring sensitive information is a bad idea
We all have seen photographs or images of people that have been blurred to hide faces. Here is an example of a blurred face image:
This is ok for the most part. You can't see who is in the blurred image. There is no convenient way to reverse the blur image back into a good image so you could recognize the person. That is good so far. The problem is that people often resort to blurring sensitive information which is a very bad idea. Posting a blurred image of your credit card a web site is a very bad idea. Every image blur can be reverse engineered to its original shape.
It is easy, just include the code provided below into your HTML code.
Delicious
Digg
StumbleUpon
Furl
Facebook
Google
Yahoo
