How to protect images in asp.net Website?

if we have to protect our images from being download or reusing by some other person on other website, we can protect our images using so many ways like

1.Disable right click using Javascript or Jquery
2.Keeping “WaterMark Text” on Image

How to disable right click using Javascript ?

This method is very easy to use, but if the user will disable the javascript then he can download the image.

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="Image_Protection_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>

<script language="javascript">

function right(e) {
var msg = "Sorry, you don’t have permission to download Image";

if (navigator.appName == ‘Netscape’ && e.which == 3) {
alert(msg);
return false;
}
if (navigator.appName == ‘Microsoft Internet Explorer’ && event.button==2) {
alert(msg);
return false;
}
else return true;
}

function trap()
{
if(document.images)
{
for(i=0;i<document.images.length;i++)
{
document.images[i].onmousedown = right;
document.images[i].onmouseup = right;
}
}
}

</script>

</head>
<body onLoad="trap()">
<form id="form1" runat="server">
<div>
<img src="../Img/Penguins.jpg" alt="" height="300px" height="200px" />
</div>
</form>
</body>
</html>

How to disable right click using Jquery ?

Here is the complete syntax

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Image_Protection_Default2" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script language="javascript" type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script type="text/javascript" language="javascript">
$(function() {
$(this).bind("contextmenu", function(e) {
e.preventDefault();
var msg = "Sorry, you don’t have permission to download Image";
alert(msg);
});
});

</script>

</head>
<body>
<form id="form1" runat="server">
<div>
<img src="../Img/Penguins.jpg" height="200Px" width="200px" alt="" />

</div>
</form>
</body>
</html>

For keeping watermar text on image read this article WaterMark Text on Image

Xay September 17, 2011 / 6:38 pm

Thank you for posted it saves my time and it helps a lot.

Chandra Dev September 18, 2011 / 4:25 pm

I am glad to know that my artical helped you.