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

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

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

使用JavaScript我想查找某个分区内的所有图像或所有图像。
应用这些图像的顶部一个新的图像叠加，将有图像相同的宽度和高度，他们都覆盖

我不知道如何用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); 
    } 
}

来源

2013-04-08 JasonDavis

我会建议你使用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-08 18:25:31 Pevara

感谢这就是我一直在寻找的 – JasonDavis 2013-04-08 18:30:48

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

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

来源

2013-04-08 17:18:21 flyingfisch

是的，这是不可能的，因为我不能改变任何HTML的，这就是为什么我要寻找一个完整的JS解决方案 – JasonDavis 2013-04-08 17:19:14

这将需要更多的工作设置div宽度和高度/等。 – lucuma 2013-04-08 17:19:34

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

回答

相关问题