使用JavaScript在其他图像上添加透明图像

Question

I need to add a Transparent image on top of all images on a page. The goal is if a user were to do a simple right click and save of an image, they would save the transparent image.

I do realize this is not a guaranteed method and that none exist to prevent image theft but simply a measure that a client wants added to prevent your average non tech person from saving images.

• Using JavaScript I would like to find all images or all images within a certain Div.
• Apply a new image overlay on top of these images that will have the same width and height of the image they are covering

I am not sure how to do this with JavaScript and was hoping someone would have a quick fix or example. I was unable to find anything so far on Google or SO. Appreciate any help

I have this JS which gets all images on a page so far...

// Get all images on a Page
function checkimages() {
     var images = document.images;
     for (var i=0; i<images.length; i++){
        var img =images[i].src;

       // Add new transparent image on top of this image
       alert(img);
     }
}

Answer 1

I would advise you to work with jQuery (or similar library) to keep things easier. I would even write a small jquery extension to make it easy to recycle the code, and apply it on any div (or other wrapper), wich child images you want to be overlayed.

My code would look something like this:

// jquery plugin to create overlays
// src is the url of the overlay image
// apply to any container that contains images to be overlayed
$.fn.overlayImages = function(src) {
    // loop trough the images
    $(this).find('img').each(function() {
        // cache some variables
        var $img =  $(this);
        var $parent = $img.parent();
        // make the parent relative, if not yet absolute or fixed, for easy positioning
        if ($parent.css('position') !== 'fixed' && $parent.css('position') !== 'absolute') {
            $parent.css('position', 'relative');            
        }
        // get the position of the image
        var position = $img.position();
        // clone the image
        var $overlay = $img.clone();
        // set the styling, based on the img, for exact positioning
        $overlay.css({
            top: position.top,
            left: position.left,
            position: 'absolute',
            width: $img.width(),
            height: $img.height()
        });
        // change the src attribute for the overlay
        $overlay.attr('src', src);
        // insert the overlay to the DOM
        $overlay.insertAfter($img);
    });
}

// when the DOM is loaded (not just ready, the images need to be there to copy their position and size)
$(window).load(function() {
    // apply the overlay plugin to the wrapper of the images
    $('#replace-images').overlayImages("http://www.riptideinnovations.com/images/watermark.png");
});

I added the step by step explanation inside the code as comments, but do feel free to ask if you want any further explanation.

I set up a small fiddle to demonstrate: http://jsfiddle.net/pP96f/6/

Answer 2

我不知道这是否会有所帮助，但你可以使用这样的背景制作你的图像所有div：

<div style="background-image: url('<your_image>');"></div>