Skip to content
View in the app

A better way to browse. Learn more.

Web Designer Forum

A full-screen app on your home screen with push notifications, badges and more.

To install this app on iOS and iPadOS
  1. Tap the Share icon in Safari
  2. Scroll the menu and tap Add to Home Screen.
  3. Tap Add in the top-right corner.
To install this app on Android
  1. Tap the 3-dot menu (⋮) in the top-right corner of the browser.
  2. Tap Add to Home screen or Install app.
  3. Confirm by tapping Install.

disabling print screen on a webpage?

Featured Replies

Hi

 

So, I am designing a system for a photography company to allow their customers to go and view photo's online before purchasing them, and I have successfully prevented the image being copied in almost every way I can think possible, including right click / saving, using the source to find the original file (links to a imagehandle.php - which also prevents the image being stored in the ie cache), preventing the user from going directly to imagehandle.php etc, preventing image dragging...

 

The only problem I can find that I have left is disabling the print screen on the webpage. I think I'm close to the solution, but not quite... So far I've tried this:...

 

	<script style="text/javascript">
	function GalleryControl(){
		if (window.clipboardData.setData('text','')){
			setInterval("window.clipboardData.setData('text','')",20);	
			document.getElementById("LoadImage").innerHTML = ""; //***Code to write image src will go here..
		}else{
			alert ("Clipboard is required to view the client area. Please allow access to continue.");
		}
	}
</script>

</head>

<body onLoad="javascript:GalleryControl()">

 

...Now, this has worked a treat in Internet Explorer... if the user does not allow the page access to the clipboard, then an error message is displayed, and the image is not loaded.

 

However this did not work when I came to try it using google chrome and mozilla firefox, it does not work and allows people to print screen.

 

 

Does anyone know how I can make the above script cross browser compatible so that I can prevent printscreen being used on all browsers? Or does anyone know of any alternative methods?

 

Ive looked on google and all I seem to get is pages telling me how to disable right click, which is not the issue.

 

 

Thanks for any advice!

I dont acually think that there is a definate way to do that? as There is always a way? :s

  • Author

Hi, Its currently on the development part of the site, and I don't really wanna give out details just yet.

 

Theres only 1 thing I can think off at the minute, and that is to advise users that if they want good quality images to view online that they will need to use IE..... and provide a pixellated and proof'd version of the images for people who don't want to use IE.

 

How fustrating lol.

yep. you can always do a screen grab.

you can always overlaw every image with a transparent image, just another detterent though

  • Author

pat overlaying the image with a transparent image isn't realy going to stop someone pressing print screen lol.

 

The only solution I have as of the minute is to keep the images pixellated, small and proofed - and allow an "enhanced" viewing option for Internet explorer users only.

 

(also before anyone jumps their gun and says I shouldn't be allowed access to someones clipboard, it would be stated that the script will require access to the clipboard prior to them going on the page in question... and to ensure they have no data that needs to be saved on the clipboard first.

  • Author

just considering if its possible to do it by running a 1x1px flash application in the corner of the website... could fix the problem?

 

*Update actually, come to think of it, it would probably only work if I was actually focused on the flash app...?

why are you worried about screengrabs if the end product is and image for print. if you have 600x400 preview they the won't be able to print them properly anyway. and yeah, add subtle watermark and you're sorted.

 

All your javascript wizardry won't help if someone will really want to steal your image. there'e many ways around it.

  • Author

should it have worked, I would not physically know another way around getting the image from the website. If a web designer doesn't know another way around their own system, then I doubt john doe who goes on and checks his e-mail once a month would know. Yeah there might be 1 or 2 people that happened to get past it but a majority wouldn't.

 

Either way i think the idea of being able to display better resolution previews is gone, firefox and chrome don't support clipboard access in any way, so im not going to prevent it. I'll just stick to the watermarking and lowering the resolution to a point where printing it wouldn't really be feasible.

 

Thanks anyway all.

  • Author

blue dreamer, i always had watermark as an option, but I thought it would really unique if I could offer a secure way to allow images to be previewed without it. I guess not through.

Create an account or sign in to comment

Account

Navigation

Search

Search

Configure browser push notifications

Chrome (Android)
  1. Tap the lock icon next to the address bar.
  2. Tap Permissions → Notifications.
  3. Adjust your preference.
Chrome (Desktop)
  1. Click the padlock icon in the address bar.
  2. Select Site settings.
  3. Find Notifications and adjust your preference.