0

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

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

  • 使用 JavaScript 我想在某个 Div 中查找所有图像或所有图像。
  • 在这些图像之上应用一个新的图像叠加层，这些图像将具有与它们所覆盖的图像相同的宽度和高度

我不知道如何用 JavaScript 做到这一点，并希望有人能快速修复或示例。到目前为止，我在 Google 或 SO 上找不到任何东西。感谢任何帮助

到目前为止，我有这个 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);
     }
}
4

2 回答 2

3

我建议您使用 jQuery（或类似的库）以使事情变得更容易。我什至会编写一个小的 jquery 扩展来轻松回收代码，并将其应用于任何 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");
});

我在代码中添加了一步一步的解释作为注释，但如果您需要任何进一步的解释，请随时询问。

我设置了一个小小提琴来演示：http: //jsfiddle.net/pP96f/6/

于 2013-04-08T18:25:31.083 回答
0

我不知道这是否会有所帮助，但你可以让你的图像全部 div 的背景是这样的：

<div style="background-image: url('<your_image>');"></div>
于 2013-04-08T17:18:21.767 回答