最近博客在思索是否添加图片水印功能,所以研究了下图片水印功能相关实现方式,以下是通过js来实现前端的图片水印功能案例:

如果需要后端的图片水印案例请搜索笔记《java图像水印demo》即可找到后台水印实现方式。

       以下是实现案例代码,复制可以直接运行看效果:当然图片路径需要改为你自己的图片路径哦。

<!DOCTYPE html>
<html lang="en">

	<head>
		<meta charset="UTF-8">
		<title>Document</title>
		<script type="text/javascript" src="js/jquery.min.js"></script>
		<script>
			$(function() {
				$("img").each(function() {
					// 特殊情况--过滤掉无关的图片
					if($(this).attr("id") == "img1") {
						return;
					}
					var top = $(this).offset().top + 10; //这里数字根据需要调,一般配在数据库中
					var left = $(this).offset().left + 10;
					var styleString = "width:250px;height:50px;display:block;position:absolute;left:" + left + "px;top:" + top + "px;";
					var imageUrl = "img/2.png";
					//追加水印div
					$(document.body).append('<div id="shuiyinDiv" style=' + styleString + '><img src=' + imageUrl + '></div>');
				});
			});
		</script>
	</head>
	<body>
		<div>
			<img src="img/1.png" />
		</div>
	</body>



效果图:



作者:星辰 时间:2016-08-14 浏览 982评论 0 赞 0砸 0 标签: demo javascript
评论
还可以再输入500个字

请您注意

·自觉遵守:爱国、守法、自律、真实、文明的原则
·尊重网上道德,遵守《全国人大常委会关于维护互联网安全的决定》及中华人民共和国其他各项有关法律法规
·严禁发表危害国家安全,破坏民族团结、国家宗教政策和社会稳定,含侮辱、诽谤、教唆、淫秽等内容的作品
·承担一切因您的行为而直接或间接导致的民事或刑事法律责任
·您在NoteShare上发表的作品,NoteShare有权在网站内保留、转载、引用或者删除
·参与本评论即表明您已经阅读并接受上述条款