javascript - Protecting an Image from downloading by Right-Click - Stack Overflow

admin管理员组

文章数量:1279214

I do know that there is no sure fire way to fully protect an image from being downloaded. This method is to prevent the casual user from downloading by simple right click. The best way probably would be simply copyrighting your images and if you are very concerned would be using a service like Digimarc to digitally watermark your image. Now to the question:

I came across a site that is using a GIF overlay over their actual image so it protects the image from users right clicking and downloading the image (though you can still grab the actual image from within the code). The code they use to do this is:

<div><img src="-Transparent GIF File-" alt="" width="530" height="558" 
border="0" original="-Actual Image Displayed-" /></div>

My question is the original tag is not a real tag and is used and translated by Javascript of some sort. I would like to replicate this on my site. Can someone help me find this script or reproduce the effect?

I do know that there is no sure fire way to fully protect an image from being downloaded. This method is to prevent the casual user from downloading by simple right click. The best way probably would be simply copyrighting your images and if you are very concerned would be using a service like Digimarc to digitally watermark your image. Now to the question:

I came across a site that is using a GIF overlay over their actual image so it protects the image from users right clicking and downloading the image (though you can still grab the actual image from within the code). The code they use to do this is:

<div><img src="-Transparent GIF File-" alt="" width="530" height="558" 
border="0" original="-Actual Image Displayed-" /></div>

My question is the original tag is not a real tag and is used and translated by Javascript of some sort. I would like to replicate this on my site. Can someone help me find this script or reproduce the effect?

• javascript
• jquery
• image
• copy-protection
• data-protection

Share Improve this question Follow edited Feb 8, 2024 at 21:31 TylerH 21.1k7777 gold badges7979 silver badges112112 bronze badges asked Jan 2, 2012 at 5:19 L84L84 46.3k5959 gold badges181181 silver badges259259 bronze badges 1

• Given you've managed to read the html source of the page you were looking at why don't you also look at the associated JS? The original attribute is a non-standard attribute. Although technically not valid html most (all?) browsers will ignore it yet allow it to be accessed from JS. – nnnnnn Commented Jan 2, 2012 at 5:36

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 7

This is pointless. If a browser displays an image, it can be taken. Any attempt to prevent that is merely site overhead that can very easily be circumvented.

You're best protection is to put a copyright notice on the images themselves.

In any event, if you really want to swap the original attribute you can...

$(function() {
var o = $('img').attr('original');
$('img').attr('src', o);
});

Demo here

but... that doesn't do anything to prevent the user selecting and saving the image tied tot eh original attribute.

A simpler solution for what you're trying to acplish is to add all of these attributes to the img tag:

ondrag="return false"
ondragstart="return false"
oncontextmenu="return false"
galleryimg="no"
onmousedown="return false"

Also, to optionally make the image print smaller, add this to the img tag:

class="imgPrint"

And include this related CSS:

@media print
{
    .imgPrint
    {
        width: 40%;
    }
}

This is my implementation for a light protection of images.

It will create a transparent cover DOM element over the image (or text). If you disable javascript the image will be hidden and if you remove the cover the image will be hidden on mouse over. Also right click on images is disabled.

You can always printscreen, grab from the downloaded resources, etc, etc. This will only filter the most basic ways of download. But for a more convenient protection you have to hide the image path and render to a canvas object.

You can improve this, but there is always a method to get the image.

Tested on major browsers and working!

HTML

<div class="covered">
    <img src="image.jpg" alt="" />
</div>

JAVASCRIPT + JQUERY

$('.covered').each( function () {

    $(this).append('<cover></cover>');
    $(this).mousedown(function(e){ 
        if( e.button == 2 ) { 
            e.preventDefault();

          return false; 
        } 
        return true;
    });

    $('img', this).css('display', 'block');

    $(this).hover(function(){
        var el = $('cover', this);
        if (el.length <= 0) { 
            $(this).html('');
        }
    });
});

CSS

cover
{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.covered
{
    position: relative;
}

.covered img
{
    display: none;
}

本文标签： javascriptProtecting an Image from downloading by RightClickStack Overflow