Do not allow saving image of a web page

Asked

Viewed 4,914 times

3

I don’t want the "save image as.." option to appear when I right-click an image on an HTML page. That is, it will be impossible to save images from the site. How can I do this check?

php javascript jquery html
  • 1

    Test: Open the page with the image. Open Paint (in Windows). Press alt+tab to bring the focus back to the page. Press Prtscr. Press alt+tab to go back to Paint. Press Ctrl+V to paste the image. If the image appeared, your method to prevent saving the image failed.

  • 1

    Anyone can save images from a website without needing the mouse.

  • If you are going to sell this solution to a customer there is no guarantee that it is fireproof. You can save the page and/or open with javascript disabled, you can copy images with the keyboard only, you can cache search, etc. It is better to accept that it is not possible to guarantee this behavior.

  • Whenever an image appears in the browser it is already on your disk, if you can block all other forms, still has the options to download by temporary internet files :/

  • Note that these procedures do not actually prevent the download of the images, only makes it difficult for those who do not understand html and the use of developer tools available in browsers.

  • 1

    Yes, I know that. But the client asked me that when I clicked right, I could not save the image. This is just to do the "will" to the customer

  • Watermarks seem the best form of use limitation. There are solutions that do this directly via Javascript (for example, http://www.patrick-wied.at/static/watermarkjs/), but which can still be circumvented by knowledgeable users. If, however, the original image already has a watermark (made in Gimp, for example: http://www.youtube.com/watch?v=D953v8dgfj8), it is much more difficult to be used lightly (or without proper advertising, as @utluiz mentioned in his reply). Make clear to your customer the limitations and advantages of each approach.

  • Ah, and just out of curiosity (and why it’s cool!), depending on its display purpose (preview, for example) and if the project allows it to be "creative", there are options like using text only to display images. : ) Example: http://www.nihilogic.dk/labs/jsascii/

Show 3 more comments

8 answers

13

It is not possible to block user content. In fact when the page opens the image is already cached on the computer.

I am (personally) against changing the expected functionality of a browser/page. But to try to help you, the best option I see is to use the images as background-image and not as <img>.

Another option is to block the image with, for example, a div transparent on top of the image so it is not received click, or with CSS: pointer-events: none;.

There is another option that is to use Flash, but again, it is always possible to get the image if the user knows how to do it.

However, once again, the content is already in the computer and it is possible to copy it.

Suggestion of reading (in English)

  • I think it’s possible, I remember that the old "hi5" had this protection, if I’m not mistaken

  • of course it’s possible, I’ll post an answer

  • 2

    It is possible not to have the option "Save image as" but Sergio is right. Even without this option the image the user is seeing is already in the browser cache. If you still want to remove the option put an invisible div on the image, hence the user when trying to click on the image will actually be clicking on the div.

  • but just as I may not let the user copy the text, it should also be possible for the images

  • 1

    The only way you can prevent a user from copying the text is by using an image instead of text, even though it is impossible to prevent the user from getting the image and OCR on it. (except in a captcha where the text is distorted to spread OCR)

6


You can block the "Right Click" of the mouse on your page, but this is not recommended, because you will lose all the other features that the right button has. Even so, there is a way to do, if you really want to, using the following Javascript code:

document.onmousedown=disableclick;
function disableclick(event)
{
  if(event.button==2)
   {
     return false;    
   }
}

And also you have to add this property to your <body> of your HTML:

<body oncontextmenu="return false">

Additional Information: Many browsers have a security option not to allow them to disable "Right-Click".

Important detail: Regarding the title of your question... my solution will not prevent the user from getting his image, but will only make it difficult. (if javascript is enabled in the browser.)

  • 1

    Thank you very much!

  • 3

    Note that this procedure does not really prevent the download of the images, only makes it difficult for those who do not understand html and the use of the developer tools available in the browsers.

4

You can disable the right click as follows:

$('img').bind('contextmenu', function(e){
  return false;
});

EXAMPLE

Tried some plugin?

Has some HERE.

  • had already tested this code and also not give

  • should not give due some javascript you already have there. thanks for the help!

4

Some sites like Flickr, photographers' websites, crafts and others have some protection mechanisms to prevent anyone with no computer experience save available photos. Unfortunately, people of dubious character copy these photos and republish as if they were the authors.

Some sites use javascript to try to block the context menu and the selection of site content. Others place a layer transparent above the image to avoid the context menu. There are those who use technologies like Flash to display the images in a container controlled.

In my experience, any of these techniques have two major and immediate impacts:

  • In fact, it will make it difficult for people with no knowledge of computers to save images, especially those using Internet Explorer, the browser that allows greater intrusion of other people’s code.
  • However, it will greatly decrease the usability of the site for legitimate users.

When I access a site, I click with the direct button and a dialog box appears with a message like "Copy prohibited", my first reaction is: try to look for a better site. If you have no choice, the next step is to disable Script.

In my experience, the only "safe" and "legitimate" way to secure rights over images is to place a logo or watermark on the image itself.

My suggestions are:

  • Don’t try to inhibit the user. The best companies and the best businesses are those that focus on the customer and not on the protection of their own rights.
  • Use more creative means to avoid copying. Several years ago when I was a webdesigner, I made several craft websites. The best thing was to put the logo with the website link in the images and let everyone copy. So the site gained a lot of free publicity with people who sent photos to friends.

2

Superimpose an invisible div on the image, when trying to click on the image the user will be clicking on the div. But look at Sergio’s answer, he’s right.

1

It is not possible to do this via code, you will have to find another way out to do this. For example put a div on top of the image with the same dimensions. So when it clicks will not appear the option to save 'save image as'..

1

If you are going to be on the web, it will be very difficult to prohibit a user from saving the image. With a simple print, you can circumvent this. I think it is not possible to prevent the user from doing something wrong. We can rather limit your macro actions.

Examples of macro actions:

This "solution" blocks the entire page’s copy of content, you can use this script by replacing the Document with the ID or CLASS of your component

  • Lock CTRL+A
  • Right click context menu
  • Select text with the mouse
 function block() {
        jQuery.fn.extend({
            disableSelection : function() {
                return this.each(function() {
                    this.onselectstart = function() {
                        return false;
                    };
                    this.unselectable = "on";
                    jQuery(this).css('user-select', 'none');
                    jQuery(this).css('-o-user-select', 'none');
                    jQuery(this).css('-moz-user-select', 'none');
                    jQuery(this).css('-khtml-user-select', 'none');
                    jQuery(this).css('-webkit-user-select', 'none');
                });
            },
            disableSelectedAll : function() {
                return this.each(function() {
                    this.onkeydown = function(event) {
                        if( event.ctrlKey \\&\\& (event.keyCode == 65 || event.keyCode == 97) ){
                            event.preventDefault();
                        }
                    };
                });
            }
        });

        $(document).disableSelection();

        $(document).disableSelectedAll();

        $(document).bind('contextmenu', function(event) {
            event.preventDefault();
        });
    }

Source: Reflective Attitude

  • 1

    yes, I know it’s possible with the printscreen. But the customer asked me to right-click, so I couldn’t save the image.

1

If the idea is to hinder the options provided will help you. However what is traveling on the net is not protected, IE, in the HTTP request the image is there.

In firefox if you access Ferramenta-> Propiedade da Página-> Mídia there will have the images that the page is using. Or even access to Ferramenta de Desenvolvedorthat all browsers today have.

  • I know that, but the client asked not to show the "save image as.."

Browser other questions tagged php javascript jquery html

You are not signed in. Login or sign up in order to post.