使用JavaScript在其他图像的顶部添加透明图像

我需要添加一个页面上的所有图像顶部的透明图像。目标是，如果用户只需右键单击并保存图像，他们将保存透明图像

我确实意识到这不是一种保证的方法，也没有一种方法可以防止图像被盗，而只是一种客户希望添加的措施，以防止普通非技术人员保存图像

• 使用JavaScript，我希望找到所有图像或某个Div中的所有图像
• 在这些图像的顶部应用一个新的图像覆盖，这些图像的宽度和高度与它们所覆盖的图像的宽度和高度相同

我不知道如何使用JavaScript实现这一点，希望有人能提供一个快速修复或示例。到目前为止，我在谷歌上找不到任何东西。谢谢你的帮助

我有一个JS，到目前为止，它在一个页面上获取所有图像

// 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);
     }
}

//获取页面上的所有图像
函数checkimages（）{
var images=document.images；
对于（var i=0；i我不知道这是否有帮助，但您可以将图像制作成所有具有以下背景的div：

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

// 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");
});

我不知道这是否有帮助，但您可以将图像制作成所有具有以下背景的div：

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

// 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");
});

我建议您使用jQuery（或类似的库）使事情变得更简单。我甚至会编写一个小的jQuery扩展，使代码易于回收，并将其应用到任何div（或其他包装器）上，其中包含要覆盖的子图像

我的代码如下所示：

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

// 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");
});

我在代码中添加了一步一步的解释作为注释，但是请随意询问是否需要进一步的解释

我设置了一个小提琴来演示：
我建议您使用jQuery（或类似的库）来简化工作。我甚至会编写一个小的jQuery扩展来简化代码的回收，并将其应用到任何div（或其他包装器）上，其中包含您想要覆盖的子图像

我的代码如下所示：

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

// 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");
});

我在代码中添加了一步一步的解释作为注释，但是请随意询问是否需要进一步的解释

我设置了一个小提琴来演示：
是的，这是不可能的，因为我无法更改任何HTML，这就是为什么我要寻找完整的JS解决方案这将需要更多的工作来设置div宽度和高度等。是的，这是不可能的，因为我无法更改任何HTML，这就是为什么我要寻找完整的JS解决方案这是w设置div width和heights/etc需要更多的工作。jQuery并不“简单”。它是一个工具，必须学习；它是一个API，没有编写自己的JavaScript那么灵活。我建议，不要使用它。我建议学习一些从互联网和www出现以来就一直在使用的东西。我最讨厌的是，“您的代码已被弃用"，这就是当你使用一组打包的/hi-jacked无用的Want-be代码时，你会收到的API通知。问一个关于JS的问题，然后得到jQuery。它什么时候会停止？@ejbytes，你知道这个答案已经有7年了吧？相信我，在尝试编写跨浏览器JavaScript时，使用jQuery真的很容易。幸运的是时代变了，而且我倾向于同意你的看法。jQuery的时代已经过去，在这种情况下，香草JavaScript会做得很好，我也会建议不要这样做！我确实意识到了这一点。但当我陷入困境时，我不得不去Gaggle搜索，StackOverflow是最重要的结果…只是厌倦了看到jQuery。保重，巴德：）jQuery，不是“更容易”。这是一个必须学习的工具；它是一个API，没有编写自己的JavaScript那么灵活。我建议，不要使用它。我建议学习一些自互联网和www诞生以来一直在使用的东西。我最讨厌的是，“你的代码已经被弃用了”，这就是当你使用一组打包的/hi-jacked无用的Want-be代码时，你会收到的API通知。问一个关于JS的问题，然后得到jQuery。它什么时候会停止？@ejbytes，你知道这个答案已经有7年了吧？相信我，在尝试编写跨浏览器JavaScript时，使用jQuery真的很容易。幸运的是时代变了，而且我倾向于同意你的看法。jQuery的时代已经过去了，在这种情况下，香草JavaScript会做得很好，我也会建议不要这样做！我确实意识到这一点。但当我陷入困境时，我必须去Gaggle搜索，StackOverflow是最重要的结果…只是厌倦了看到jQuery。保重，巴德：）