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

最新推荐文章于 2024-05-12 10:06:43 发布

shenzhenNBA

最新推荐文章于 2024-05-12 10:06:43 发布

阅读量1.5w

点赞数

文章标签： javascript function image string html null

本文链接：https://blog.csdn.net/shenzhenNBA/article/details/5853566

版权

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

//使用例子

完整例子如下：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>JS模拟实现在图片上添加水印效果</title>
</head>
<style type="text/css">
*{font-family:verdana; font-size:12px;}
</style>
<script language="javascript" type="text/javascript">
/*
@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;
}
</script>
<body>
JS模拟实现在图片上添加水印效果
 
<img οnlοad="javascript:setWatermark(this,'http://avatar.profile.csdn.net/5/1/9/2_shenzhennba.jpg',60);" src="http://avatar.profile.csdn.net/5/B/6/2_zerosprite.jpg" width="400" height="200">
 

@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)"> 

 
<img οnlοad="javascript:setWatermark(this,'http://avatar.profile.csdn.net/5/1/9/2_shenzhennba.jpg',60);" src="http://avatar.profile.csdn.net/2/6/4/2_beyond_me21.jpg" width="400" height="200">
 
 
<img οnlοad="javascript:setWatermark(this,'http://avatar.profile.csdn.net/5/1/9/2_shenzhennba.jpg',60);" src="http://avatar.profile.csdn.net/E/D/5/2_superwfei.jpg" width="400" height="200">
 
 
<img οnlοad="javascript:setWatermark(this,'http://avatar.profile.csdn.net/5/1/9/2_shenzhennba.jpg',60);" src="http://avatar.profile.csdn.net/0/C/2/2_chinaxthulang.jpg" width="400" height="200">
 
 
<img οnlοad="javascript:setWatermark(this,'http://avatar.profile.csdn.net/5/1/9/2_shenzhennba.jpg',60);" src="http://avatar.profile.csdn.net/A/9/7/2_theforever.jpg" width="400" height="200">
 
 
<img οnlοad="javascript:setWatermark(this,'http://avatar.profile.csdn.net/5/1/9/2_shenzhennba.jpg',60);" src="http://avatar.profile.csdn.net/B/1/0/2_bluesky4014.jpg" width="400" height="200">
 

</body>
</html>

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

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

shenzhenNBA

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
JS模拟实现图片添加水印功能

 JS模拟实现图片添加水印功能 ======================================================== 今天看到网友发帖求助如果在图片上自动添加水印的功能，于是，俺想一下如果仅仅结果输出效果类似的水印效果，那JS应该可以模拟实现；于是动手写一下，第一次发博文，呵呵...有点陌生，简单介绍一下。 1，原理：建立一个半透明的层，层里面放置一个作为水印的图片，再把这个层放到需要添加水印的图片某个位置上即可，效果如图中
复制链接

扫一扫