I do not want the "save image as .." option when I right-click on an image in an HTML page. That is, it will be impossible to save the images from the site. How can I do this verification?
Do not allow saving image of a web page
3
asked by anonymous 06.02.2014 / 13:54
8 answers
5
You can block the "Right click" on your page, however this is not recommended because you will lose all other features that the right button has. Even so, there's a way to do it, if you really want it, by using the following JavaScript code:
document.onmousedown=disableclick;
function disableclick(event)
{
if(event.button==2)
{
return false;
}
}
And you also have to add this property to your <body> of your HTML:
<body oncontextmenu="return false">
Additional Information: Many browsers have a security option to not allow you to disable "Right-click."
Important detail: Regarding the title of your question ... my solution will not prevent you from getting your image, but it will only make it difficult. (this is if it is javascript enabled in the browser.)
06.02.2014 / 14:05
13
Unable to block user content. By the way when the page opens the image is already in the cache on the computer.
I am (personally) against changing the functionality expected of a browser / page. However, to try to help, 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% transparent cope on top of the image so that it is not receiving a click, or with CSS: div .
There is still another option that is to use Flash, but once again, it is always possible to get the image if the user knows how to do it.
But once again, the content is already on the computer and it is possible to copy it.
Suggestion for read (in English)
06.02.2014 / 13:57
4
Some sites like Flickr, photographers, crafts and other websites have some protection mechanisms to prevent any person with no computer experience from saving the photos. Unfortunately, dubious people copy these photos and republish them 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 transparent layer over the image to avoid the context menu. There are those who use technologies like Flash to display the images in a controlled container .
In my experience, any of these techniques have two major immediate impacts:
- In fact, it will make it difficult for people with no computer knowledge to save images, especially those that use Internet Explorer, the browser that allows the greater intrusion of other people's code.
- However, it will greatly decrease the site's usability for legitimate users.
When I access a site, I click the direct button and a dialog box appears with a "Copy Forbidden" message, my first reaction is to try to search for a better site. If you do not have a choice, the next step is to disable Script.
In my experience, the only "safe" and "legitimate" way of securing rights to images is to put a logo or watermark on the image itself.
My suggestions are:
- Do not attempt to inhibit the user. The best companies and the best deals are those that focus on the customer and not the protection of their own rights.
- Use more creative means to avoid copying. Several years ago when I was webdesigner, I made several craft sites. The best thing was to put 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 the photos to friends.
06.02.2014 / 14:11
4
2
Overlay 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 response, he's right.
06.02.2014 / 14:02
1
If you're going to be on the web, it's going to be pretty hard for you to ban a user from saving the image. With a simple print, you can fool it. I think it is not possible to prevent the user from doing something wrong. We can limit your macro actions .
Examples of macro actions :
This "solution" blocks the copying of full page content, you can use this script by swapping the Document by the ID or by your component's CLASS
- 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
06.02.2014 / 13:59
1
If the idea is to hinder the options provided will help you. But what is traveling on the net is not protected, ie in the request Http the image is there.
In firefox if you access Ferramenta-> Propiedade da Página-> Mídia there will be the images that the page is using. Or even access the Ferramenta de Desenvolvedor that all Browsers have today.
06.02.2014 / 14:48
1
Can not do this via code, you'll have to find another way out to do this. For example, place a div on top of the image with the same dimensions. So when it clicks it will not appear the option to save 'save image as' ..
06.02.2014 / 18:39