为图片添加logo

这里的添加logo只是在原图片上新建一个层，然后在新层上添加logo图片，这样既有logo水印的效果，也可以简单的防止别人之间单击右键下载图片

首先在页面中添加一个图片：

<img src="pic.jpg" mce_src="pic.jpg" id="sample_pic">

然后获取图片的位置和长宽大小：

var sample_pic = $('sample_pic') if(!sample_pic) return; var mask = $('mask') if(mask){//如果遮罩层已经存在则删除（主要是防止用户resize窗口） mask.innerHTML = "" document.body.removeChild(mask) } var pos = Position.cumulativeOffset(sample_pic) //prototype.js var dim = Element.extend(sample_pic).getDimensions() //prototype.js

然后初始化遮罩层和logo图片：

var logo = document.createElement('img') logo.setAttribute('src','/images/rcc.jpg') logo.style.position = 'absolute' logo.style.zIndex = '20' logo.style.left = '15px' logo.style.top = '0px' var div = document.createElement('div') div.setAttribute('id','mask') div.style.position = 'absolute' div.style.left = pos.left + 'px' div.style.top = pos.top + 'px' div.style.filter = "Alpha(opacity=10)" div.style.opacity = '0.1' div.style.backgroundColor = '#fff' div.style.height = dim.height + 'px' div.style.width = (dim.width+10) + 'px' div.style.zIndex = '20' div.appendChild(logo) document.body.appendChild(div)

完整代码：

window.onload = set_mask; window.onresize = set_mask; function set_mask(){ var sample_pic = $('sample_pic') if(!sample_pic) return; var mask = $('mask') if(mask){ mask.innerHTML = "" document.body.removeChild(mask) } var pos = Position.cumulativeOffset(sample_pic) var dim = Element.extend(sample_pic).getDimensions() var logo = document.createElement('img') logo.setAttribute('src','/images/rcc.jpg') logo.style.position = 'absolute' logo.style.zIndex = '20' logo.style.left = '15px' logo.style.top = '0px' var div = document.createElement('div') div.setAttribute('id','mask') div.style.position = 'absolute' div.style.left = pos.left + 'px' div.style.top = pos.top + 'px' div.style.filter = "Alpha(opacity=10)" div.style.opacity = '0.1' div.style.backgroundColor = '#fff' div.style.height = dim.height + 'px' div.style.width = (dim.width+10) + 'px' div.style.zIndex = '20' div.appendChild(logo) document.body.appendChild(div) }