If you have images on a webpage then they are not entirely safe from users who wish to download or save them on their computers. A determined user with the technical know-how can find many ways to bypass any image copy protection.
However, there are many ways to stop and deter casual users and search bots from copying, viewing or downloading images. Here, we have listed some of the methods where you can use a little bit of javascript or CSS to implement them on your webpages.
Disable the Mouse Right Click
This is the most common method where you have to simply disable the right click feature on your webpage. This would not allow the user to access the contextual menu in any browser and he would not be able to copy the images
You can simply add the following javascript code to your webpage
<script>
function disableRightClick(event) {
if (event.button == 2) {
event.preventDefault(); // Prevent the default right-click behavior
alert("Right click disabled.");
return false;
}
}
</script>Then to prevent right clicking on an image you can modify the <img> HTML tag like this.
<img src="image.png" oncontextmenu="disableRightClick(event)" />This would prevent right clicking only on an image. The user would still be able to copy text using the right click button
See the Pen Disable Right Click by Praveen Singh (@Praveen-Singh-the-decoder) on CodePen.
If you want to disable it for the entire page then you can prevent right clicking on the entire <body> HTML tag.
Simply, modify the <body> tag like this
<body oncontextmenu="disableRightClick(event)">
<!--Your website's HTML code.-->
</body>This would disable right clicking for the entire page and the user would not be able to select anything.
Disable Using CSS (user-select, pointer-events)
The user-select: none; and pointer-events: none; are two css properties which would stop a user from copying text or image on your webpage. The css property can be added to and image or text HTML element to prevent copying.
The syntax is as follows
.protect-copy * {
-webkit-touch-callout: none;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}Read more about user-select CSS property at the following link
https://developer.mozilla.org/en-US/docs/Web/CSS/user-select
Similarly, you can use the pointer-events CSS to disable pointer events on an element in a webpage.
.img-no-copy {
pointer-events: none;
}Read more about pointer-events CSS property at the following link
https://developer.mozilla.org/en-US/docs/Web/CSS/pointer-events
Disable Ctrl + C Shortcut for your webpage
Disabling the Contextual menu doesn’t stop a user from using the Ctrl + A shortcut to select all the text and then using the Ctrl + C shortcut to copy the text. This can be disabled using simple javascript code. Add the following two lines of code to your javascript file.
document.addEventListener('contextmenu', event => event.preventDefault());
document.addEventListener("copy", (e) => { e.preventDefault();}, false);If you are using jQuery then you can use the following code. This will disable the cut copy and paste shortcut on your webpage.
<script type="text/javascript">
$(document).ready(function () {
//Disable cut copy paste
$('body').bind('cut copy paste', function (e) {
e.preventDefault();
});
//Disable mouse right click
$("body").on("contextmenu",function(e){
return false;
});
});
</script>Disable Printing of Images When Web Page is Printed
This would stop printing of your images when someone tries to print your page. We would use CSS and @media query to stop images from appearing in printed pages. Add the following CSS code to your stylesheet file.
@media print
{
img
{
display: none;
}
}You can also create a container element or other element with the “protect-copy” class and if you want to display a message on the printed pages, instead of the image.
@media print {
.protect-copy::before {
content: "Copyright Protected image. Can’t Print "
}
.protect-copy * {
display: none;
}
}Disable Print Screen Key/Screenshots
This would stop users from using the PrintScreen key present on most keyboards from taking screenshots of your page. However, please keep in mind that it won’t stop them from using any app or screen capture tools from taking a screenshot or recording the screen.
You will have to add the following javascript code to your page
window.addEventListener("keyup", function(e) {
if (e.keyCode == 44) {
stopPrintKey();
alert("Printing/Screenshot Not allowed.");
}
});
function stopPrintKey() {
var inpFld = document.createElement("input");
inpFld.setAttribute("value", ".");
inpFld.setAttribute("width", "0");
inpFld.style.height = "0px";
inpFld.style.width = "0px";
inpFld.style.border = "0px";
document.body.appendChild(inpFld);
inpFld.select();
document.execCommand("copy");
inpFld.remove(inpFld);
}The code would prevent taking screenshots, when the tab with your webpage is active. The user would get “Printing/Screenshot not allowed”, whenever he presses the Print Scr Key on the keyboard.
The clipboard would remain empty and he won’t be able to save or paste the screenshot in any image editing app like Paint or Photoshop.