Using jQuery to prevent user's copying picture to clipboard

I need to prevent user's from copying pictures to the clipboard AND disable the "Save picture as..." context menu option, when the user right clicks on the image.

Can this be done with jQuery? I need to prevent users from capturing the image either by clipboard, or selecting "Copy image" or  "Save picture as..." from the context menu, and any other way I am forgetting to grab an image from a browser page.


Thanks,
newbieweb
newbiewebSr. Software EngineerAsked:
Who is Participating?
 
Zac HarrisSystems Administrator Commented:
Since what you are trying to do is for a website you cannot alter the context menu of the visitors to your site.

I have included a link (below) to a useful tutorial I have used before to circumvent people from stealing photos. No method is fool-proof but the steps in the tutorial at least help you make it harder for someone to take your images.

http://www.cambridgeincolour.com/tutorials/protect-online-photos.htm
0
 
Lukasz ChmielewskiCommented:
I'm afraid it is not possible. How about PrntScreen pressing ? Taking a photo of a web page ?
Not so long ago, there was a question like that on EE. The best solution as a conclusion was to add a watermark to an image.
0
 
Lukasz ChmielewskiCommented:
Read this if that does not convince you
http://www.graphicsacademy.com/howto_preventcopy.php
0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

 
Zac HarrisSystems Administrator Commented:
You can try using this code to disable the right-click functionality. Unfortunately disabling the right-click functionality on a website will also prevent users from using the copy and paste functions in text boxes. I would suggest using watermarking rather than disabling right-clicking mainly due to the fact that there are so many ways to circumvent this restriction.
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>disabling right click with jQuery</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();
            });
        }); 
    </script>
</head>
<body>
    INSERT BODY TEXT HERE
</body>
</html>

Open in new window

0
 
newbiewebSr. Software EngineerAuthor Commented:
So it seems like I could disable the right click functionality. Can't I define a different context menu that the user sees based on whether they right-click on an image versus a text box?

As far as pressing PrntScreen, that's a Windows function. So I must believe that it's something that could also be disabled using my own keyboard filter which swallows the event before passing it onto Windows.

Taking a photo is clearly one way to beat this but it's not very practical.

Watermarking is interesting...
0
 
newbiewebSr. Software EngineerAuthor Commented:
Can't I define a different context menu that the user sees based on whether they right-click on an image versus a text box?  Or what about a different context menu in general?

0
 
newbiewebSr. Software EngineerAuthor Commented:
Thanks!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.