html中实现添加水印的功能,JS模拟实现图片添加水印功能

JS模拟实现图片添加水印功能

========================================================

今天看到网友发帖求助如果在图片上自动添加水印的功能，于是，俺想一下如果仅仅结果输出效果类似的水印效果，那JS应该可以模拟实现；于是动手写一下，第一次发博文，呵呵...有点陌生，简单介绍一下。

1，原理：建立一个半透明的层，层里面放置一个作为水印的图片，再把这个层放到需要添加水印的图片某个位置上即可，效果如图中右下角带边框的图片；

2，辅助函数

function $(id){ //对象的选取

return "string" == typeof(id) ? document.getElementById(id) : id ;

}

function trim(str){ //去两边空格

return str.replace(/^/s*|/s*$/g,"");

}

3，模拟水印的核心函数

function setWatermark(objImg,watermarkPic,opacityValue){

var oimg=objImg;

var wmPic=trim(watermarkPic);

if(!oimg || wmPic == "") return;

var opa=parseInt(opacityValue,10);

//关于水印图片的宽，高，放的位置和边距

var wmPicPos="rightBottom";

var wmPicW=80;

var wmPicH=45;

var wmPicMargin=10;   //距离边框问题可以修改这里

//源图片，即要添加水印的图片的相关宽高，位置信息

var oimgW,oimgH,oimgLeft,oimgTop;

try{

oimgLeft=parseInt(oimg.offsetLeft,10);

oimgTop=parseInt(oimg.offsetTop,10);

oimgW=parseInt(oimg.width,10);

oimgH=parseInt(oimg.height,10);

}catch(e){}

//建立一个作为水印图片对象

var newImg=document.createElement("IMG");

newImg.src=wmPic;

newImg.border="0";

newImg.width=wmPicW;

newImg.height=wmPicH;

//建立一个存放水印图片的指定透明度的赠，然后加入水印图片

var newDiv=document.createElement("DIV");

newDiv.style.border="1px dotted red";   //不用边框则注释掉这行

newDiv.style.position="absolute";

newDiv.style.filter="alpha(opacity="+opa+")";

newDiv.style.MozOpacity=opa/100;

//层放的位置计算，最后添加到document中

newDiv.style.left=(oimgLeft + oimgW - wmPicW - wmPicMargin)+"px";

newDiv.style.top=(oimgTop + oimgH - wmPicH - wmPicMargin)+"px";

newDiv.appendChild(newImg);

var docBody=document.getElementsByTagName("body")[0];

if(!docBody.id) docBody.id="myDocBody";

var docBodyID=docBody.id;

$(docBodyID).appendChild(newDiv);

newImg=null;

newDiv=null;

}

//使用例子

完整例子如下：

/p>

"http://www.w3.org/TR/html4/loose.dtd">

JS模拟实现在图片上添加水印效果

*{font-family:verdana; font-size:12px;}

/*

@Name: JSWatermark

@Function: make a watermark for image with picture by JavaScript

@author:shenzhenNBA

@version: 1.0.0

@create date: 2010-08-31

*/

function $(id){

return "string" == typeof(id) ? document.getElementById(id) : id ;

}

function trim(str){

return str.replace(/^/s*|/s*$/g,"");

}

function setWatermark(objImg,watermarkPic,opacityValue){

var oimg=objImg;

var wmPic=trim(watermarkPic);

if(!oimg || wmPic == "") return;

var opa=parseInt(opacityValue,10);

var wmPicPos="rightBottom";

var wmPicW=80;

var wmPicH=45;

var wmPicMargin=10;   //距离边框问题可以修改这里

var oimgW,oimgH,oimgLeft,oimgTop;

try{

oimgLeft=parseInt(oimg.offsetLeft,10);

oimgTop=parseInt(oimg.offsetTop,10);

oimgW=parseInt(oimg.width,10);

oimgH=parseInt(oimg.height,10);

}catch(e){}

var newImg=document.createElement("IMG");

newImg.src=wmPic;

newImg.border="0";

newImg.width=wmPicW;

newImg.height=wmPicH;

var newDiv=document.createElement("DIV");

newDiv.style.border="1px dotted red";   //不用边框则注释掉这行

newDiv.style.position="absolute";

newDiv.style.filter="alpha(opacity="+opa+")";

newDiv.style.MozOpacity=opa/100;

newDiv.style.left=(oimgLeft + oimgW - wmPicW - wmPicMargin)+"px";

newDiv.style.top=(oimgTop + oimgH - wmPicH - wmPicMargin)+"px";

newDiv.appendChild(newImg);

var docBody=document.getElementsByTagName("body")[0];

if(!docBody.id) docBody.id="myDocBody";

var docBodyID=docBody.id;

$(docBodyID).appendChild(newDiv);

newImg=null;

newDiv=null;

}

JS模拟实现在图片上添加水印效果

@Name: JSWatermark

@Function: make a watermark for image with picture by JavaScript

@Author: shenzhenNBA

@Version: 1.0.0

@Created date: 2010-08-31

@Descriptioin: setWatermark(objImg,watermarkPic,opacityValue)

objImg: the image object which will add a watermark

watermarkPic: the picture which will make into watermark picture, and display over objImg

opacityValue: set the opacity of the watermark picture, value range: 0--100

@Using: using this function in the load Event of objImg

@Example: <img οnlοad="javascript:setWatermark(this,'http://www.xxx.com/images/mylogo.gif',60)">

以上是写完然后发，很多还可以改进，如放的位置，边距，是否带边框等等可以作为参数比较灵活，这个后面过段时间在增加一些功能。

注意的是这个仅仅是模拟水印效果输出显示，很简单，但并不是真正把水印图片写入到上传的图片中，如果要实现写入到上传图片中那需要图片处理控件实现，该控件还应该在服务器上注册才可以使用