CODEWITHSUNDEEP
phphtmlimagedrag-and-drop
Edy Elwood
Edy Elwood

Reputation: 137

Image protection (making sure users can't steal photos)

I'm building a webshop that offers people certain photos. In this webshop you can (of course) view your pictures.

So to make sure the photos are safe from downloading directly from the site, I gave all my image html tags the code

oncontextmenu="return false;"

Now this protects the photos from right-clicking and saving them. The problem is that if a user is smart enough to just drag the photo to their desktop, they can still download the picture.

Is there a (easy) way to protect these images from all forms of download?

Upvotes: 2

Views: 1494

Answers (6)

Shobhit Sharma
Shobhit Sharma

Reputation: 1609

Just like Jleagle said, use 

$("#imagegallery").mousedown(function(){
    return false;
});

to restrict a user from dragging a image, but if the user is smart enough to use snipping tool s/he can get a snip of your image, so in order to restrict that place a semi-transparent div over your image which puts a watermark over the image, but still then the user can see the image in the console, so to be 100% sure, i'd say add a watermark in the jpeg itself.

Upvotes: 0

Doug S
Doug S

Reputation: 10315

Add all of these attributes to the img tag:

ondrag="return false"
ondragstart="return false"
oncontextmenu="return false"
galleryimg="no"
onmousedown="return false"

Also, to optionally make the image print smaller, add this to the img tag:

class="imgPrint"

And include this related CSS:

@media print
{
    .imgPrint
    {
        width: 40%;
    }
}

Upvotes: 4

3Cdesign
3Cdesign

Reputation: 198

you can use your .htaccess file as well:

RewriteEngine On

RewriteCond %{HTTP_REFERER} !^http://(.+\.)?mysite\.com/ [NC]

RewriteCond %{HTTP_REFERER} !^$

RewriteRule .*\.(jpe?g|gif|bmp|png|jpg)$ /images/noway.jpe [L]

change the mysite text above to w.e your site is named

then create an image titled: noway.jpe

and uploaded it to my /image/ folder.

Notice the file extension .jpe – this is because .jpeg and .jpg files are now blocked from appearing on third party websites

but this exception allows you to show your custom image.

Upvotes: 3

jn1kk
jn1kk

Reputation: 5112

Make a div/table, and set the background of the div/table to be the image presented. Put an invisible (transparent) 1px X 1px image in the div/table and stretch it out to the div/table size. This way, they can't right click save it or drag it.

You can never prevent anyone from downloading anything though. But this way is by far the most popular way to prevent novice users from downloading images.

Upvotes: 4

472084
472084

Reputation: 17895

There will always be a way for people to download images on a website.

You can disable dragging images using this JavaScript:

    $("#imagegallery").mousedown(function(){
        return false;
    });

but even then you could just view the source and search for the file.

I would suggest adding a watermark, using an already made PHP class its very straight forward to add your logo to each image.

Or you could only display smallish images, making them come to you for the full versions.

Upvotes: 7

Anonymous
Anonymous

Reputation: 6251

What Noufal said in his comment, really. Another way around this is to display the image as a thumbnail/in a small resolution, with the full resolution file being made available on purchase.

Upvotes: 4

Related Questions