Solved

Using jQuery to prevent user's copying picture to clipboard

Posted on 2011-02-21
7
834 Views
Last Modified: 2012-06-21
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
0
Comment
Question by:newbieweb
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 2
  • 2
7 Comments
 
LVL 27

Assisted Solution

by:Lukasz Chmielewski
Lukasz Chmielewski earned 150 total points
ID: 34947197
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
 
LVL 27

Expert Comment

by:Lukasz Chmielewski
ID: 34947204
Read this if that does not convince you
http://www.graphicsacademy.com/howto_preventcopy.php
0
 
LVL 14

Assisted Solution

by:Zac Harris
Zac Harris earned 350 total points
ID: 34947234
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
Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

 

Author Comment

by:newbieweb
ID: 34948384
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
 

Author Comment

by:newbieweb
ID: 34948411
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
 
LVL 14

Accepted Solution

by:
Zac Harris earned 350 total points
ID: 34948456
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
 

Author Closing Comment

by:newbieweb
ID: 34948520
Thanks!
0

Featured Post

PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The Windows functions GetTickCount and timeGetTime retrieve the number of milliseconds since the system was started. However, the value is stored in a DWORD, which means that it wraps around to zero every 49.7 days. This article shows how to solve t…
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

626 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question