Search code examples
phpjavascripthtmlimagescreenshot

How to Prevent Image SaveAs + Prevent Image Drag&Drop to Desktop + Prevent Screenshot on a Desktop Browser


What are the best practices/methods/languages for Preventing the following:

  • Image SaveAs
  • Image Drag&Drop to Desktop
  • Screenshots / Screengrabs

..on a desktop browser

(have witnessed the use of a 'blacked-out-screen' when a screenshot is attempted, and the implementation of images that are 'untouchable'..)


Solution

  • To prevent the user right-clicking on the image and choosing Save As, you can add the code oncontextmenu="return false". oncontextmenu detects the user right-clicking and return false stops the action.

    Then if you do the code draggable="false" the user can't drag the image, even if they select it. I don't think there is a way to stop people using screengrabbers, but here is some code that stops Google Images and other search engines grabbing the image: <meta name="robots" content="noimageindex"></meta>.

    So all in all, try this method: place <meta name="robots" content="noimageindex"></meta> in the head of your document, and then <img src="mygreatimage.png" alt="An awesome image" oncontextmenu="return false" draggable="false"> in the document body.