CODEWITHSUNDEEP
javascriptphpjquery
Prince Gautam
Prince Gautam

Reputation: 207

Can i blur the text using php or jquery

I want to blur the text(like name, city , etc) for unpaid users of my site, So they cannot see the text that i want to restrict.

Is there any method in PHP or JQuery to blur the text in the way that user cannot see the actual information even from the Web Inspector or Web Console.

I have check the jquery plugin named Foggy its working but user can see the text in web inspector. So Please suggest me if any way in PHP that i can blur the text from my server side.

Any hint will be appreciated. Thanks in Advance.

Upvotes: 1

Views: 2252

Answers (4)

Gunjan
Gunjan

Reputation: 1

Please try this:

jQuery('.blurry-text').css('color','transparent').css('text-shadow','0 0 10px rgba(0,0,0,0.5)').text('XXXXX');

Upvotes: -1

The Humble Rat
The Humble Rat

Reputation: 4696

As javascript is client side, surely someone could figure out how to unblur this. I am sure many libraries exist to do what you need, but if you really want the information hidden server side would be the way forward.

Similarly I am sure you could achieve this with CSS, but the information will still be accessible.

Have you considered changing the result from say London to Lxxxxx or even XXXXXX. You could achieve this with strlen and substr (if you wanted to show the first letter).

Another possibility is to use a conditional to see if you should show it or not and then show say the first letter and then a generic image with blur. So maybe somehting like:

echo '<span>'.substr($name,0,1).'<img src="blur.jpg"></span>';

Update

Maybe the best way is to both change the text and to blur it, please see the following:

<style>
.blurit {
   color: transparent;
   text-shadow: 0 0 5px rgba(0,0,0,0.5);
}
</style>
<?php
    $str = "United Kingdom";
    echo '<span class="blurit">' . strtoupper(substr($str,0,1)).preg_replace("/[a-z]/", "x",substr($str, 1)) . '</span>';
?>

Upvotes: 2

alexP
alexP

Reputation: 3765

You could show a "fake text" and load the real text via Ajax.

HTML

<div id="box">
  That's the fake text
</div>

CSS

#box{
  -webkit-filter: blur(5px);
}

.nofilter{
  -webkit-filter: blur(0px) !important;
}

jQuery

$('#btn-nofilter').on('click', function(){
  $box = $('#box');  
  $box.text('Thats\' the real text.'); //GET TEXT WITH A AJAX REQUEST
  $box.addClass('nofilter');
});

But anyway: The blur effect is created using CSS3 and not JavaScript.

Fiddle

Upvotes: 3

low_rents
low_rents

Reputation: 4481

no, at least not as (HTML) text because you will always be able to see the source of your HTML.

the only possibility would be to render the text as image(s) using some PHP graphic library (GD, ImageMagick or similar) on the serverside. But this would be very bad practice in terms of clean web design.
edit: plus you would need to take care about the image of the text needing the same space as the actual text and so on..

Upvotes: 3

Related Questions