2

I am building a membership site and I don't want free members to see other members pictures clearly. The premium users will be able to see all images clearly. I was partially able to achieve this using css and svg filter but the downside is that when a user clik+hold+drag an image, the normal image is shown and too, a free member can easily download the image and get the clear copy.

I have thought of converting all image SRC into background-image using jQuery. But I can't find a way to limit this script to just a particular div. This is the code I used to convert image src into background:

$("img").each(function(i, elem) {
   var img = $(elem);
   var div = $("<div />").css({
   background: "url(" + img.attr("src") + ") no-repeat",
   width: img.width() + "px",
   height: img.height() + "px"
});
   img.replaceWith(div);
});

I will really appreciate if I can find another solution outside the jQuery one because the jQuery is conflicting with other features on the site.

Please I need a solution for this in anyway possible.

Thanks in advance.

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
Ebenezer Obasi
  • 61
  • 5
  • 2
    blurring should probably be done server side to prevent any possibility of script disablement or style sheet modification revealing images – Matt Coubrough Dec 08 '14 at 07:02
  • $('yourContainerSelector').find("img").each ... won't do it? Anyway, you can also download a background-image. So to be sure, you'll need to modify the images server side. What do you use? PHP? – axel.michel Dec 08 '14 at 07:06
  • If you don't want users to be able to see the images, don't send the images to the user. This means manipulating them on the server first. If the unblurred images get sent from the server, there's always a way that someone will be able to download them. Always. – Christian Dec 08 '14 at 07:07
  • @axel.michel Yes, I use PHP. – Ebenezer Obasi Dec 08 '14 at 08:24
  • Plenty of other questions on php image manipulation to help you get started: http://stackoverflow.com/q/7245710/3651800 – Matt Coubrough Dec 08 '14 at 08:29
  • @dspacedude http://php.net/manual/de/function.imagefilter.php - there is a ready to use blur filter in PHP - have a look. You'll also find a few examples to start with. – axel.michel Dec 08 '14 at 09:16

1 Answers1

0

you can use a common class on each image as your dummy class for making dull images. then you don't need a loop.

or you can use css property 'opacity' for making images dull. i hope this will help you :)

Ranjeet Singh
  • 924
  • 5
  • 11
  • Note however that someone just needs to turn off your style-sheet in browser and boom! the unregistered user can see all your user photos. Hence the need to perform this server-side... probably do it once at the time the user submits their photo to the site. – Matt Coubrough Dec 08 '14 at 07:54
  • yes it is. you have to make different type images with different quality on server side. – Ranjeet Singh Dec 08 '14 at 07:56