Protect image download

If it is only image then JavaScript is not really necessary. Try using this in your html file :

<img src="sample-img-15.jpg" alt="#" height="24" width="100" onContextMenu="return false;" />

No there actually is no way to prevent a user from doing a particular task. But you can always take measures! The image sharing websites have a huge team of developers working day and night to create such an algorithm where you prevent user from saving the image files.

First way

Try this:

$('img').mousedown(function (e) {
  if(e.button == 2) { // right click
    return false; // do nothing!
  }
}

So the user won't be able to click on the Save Image As... option from the menu and in turn he won't get a chance to save the image.

Second way

Other way is to use background-image. This way, the user won't be able to right click and Save the Image As... But he can still see the resources in the Inspector.

Third way

Even I am new to this one, few days ago I was surfing Flickr when I tried to right click, it did not let me do a thing. Which in turn was the first method that I provided you with. Then I tried to go and see the inspector, there I found nothing. Why? Since they were using background-image and at the same time they were using data:imagesource as its location.

Which was amazing for me too. You can precvent user from saving image files this way easily.

It is known as Data URI Scheme: http://en.wikipedia.org/wiki/Data_URI_scheme

Note

Please remember brother, when you're letting a user surf your website you're giving him READ permissions on the server side so he can read all the files without any problem. The same is the issue with image files. He can read the image files, and then he can easily save them. He downloads the images on the first place when he is surfing your website. So there is not an issue for him to save them on his disk.


Another way to remove the "save image" context menu is to use some CSS. This also leaves the rest of the context-menu intact.

img {
    pointer-events: none;
}

It makes all img elements non-reactive to any mouse events such as dragging, hovering, clicking etc.

See spec for more info.

Tags:

Html

Css

Image