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中

//使用例子

完整例子如下：

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

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>

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

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

JS模拟实现图片添加水印功能相关推荐

html中实现添加水印的功能,JS模拟实现图片添加水印功能
JS模拟实现图片添加水印功能 ======================================================== 今天看到网友发帖求助如果在图片上自动添加水印的功能,于是 ...
php绘图技术加水印,PHP图片添加水印功能示例小结
本文实例总结了PHP图片添加水印功能.分享给大家供大家参考,具体如下: 例1.很简单图下添加水印函数 /** * 追加水印 * * @param string $source_img 原始图片url ...
js技术实现图片放大镜功能
利用idea软件 js技术实现图片放大功能第一步准备图片将要放大图片放大 web 下第二步具体实现代码 <%@ page contentType="text/html;cha ...
php模拟js点击按钮,JS模拟按钮点击功能的方法
本文实例讲述了JS模拟按钮点击功能的方法.分享给大家供大家参考,具体如下: usually function function load(){ //下面两种方法效果是一样的 document.getE ...
html借助JS简单实现图片闪烁功能
图片闪烁功能: 点击按钮,实现图片闪烁效果如图: 代码如下: <!DOCTYPE html> <html><head><meta charset=&quo ...
Java图片添加水印功能
图片添加水印需求是需要添加多个斜的水印,如果只是添加单个水印可以参考这个:传送门直接上代码: private static void waterMarkAdd(String sourceFile, ...
ios 从assets加载图片_Flutter图片添加水印功能，Flutter保存Widget为图片
添加水印,两种实现思路,一种是将图片与水印解码,然后混编再编码,另一种是通过Widget的方式合成. 在这里采用的实现思路是使用层叠布局Stack加载图片以及水印部分,水印部分可能是一个现成的图片也可 ...
Flutter图片添加水印功能，Flutter保存Widget为图片
题记 -- 执剑天涯,从你的点滴积累开始,所及之处,必精益求精,即是折腾每一天. 重要消息网易云[玩转大前端]配套课程 EDU配套教程 Flutter开发的点滴积累系列文章添加水印,两种实现思路 ...
前端js实现给图片添加水印
文章目录整体思路一.Image加载图片,创建canvas来绘制图片二.canvas绘制水印文本算法三.vant中上传图片使用示例总结整体思路 1:.传入图片base64数据,使用js Im ...

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

JS模拟实现图片添加水印功能相关推荐

最新文章

热门文章