H5 前端JS添加水印

最新推荐文章于 2024-04-30 11:09:00 发布

想念我的馒头

最新推荐文章于 2024-04-30 11:09:00 发布

阅读量3.1k

点赞数

分类专栏：前端js 文章标签：给图片添加水印

本文链接：https://blog.csdn.net/new1818java/article/details/102562980

版权

前端js 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

js添加图片水印

不好用你抽我、

如果需要后台（因为后台有个引包的问题）添加水印加Q931216004拿代码，给个关注呗~

<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<meta charset="UTF-8"/>
		<script src="test.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
		/**获取当前日期*/	
		function getDate() {
		         var date = new Date();
		         var month = date.getMonth() + 1;
		         var strDate = date.getDate();
		         if (month >= 1 && month <= 9) {
		                 month = "0" + month;
		             }
		         if (strDate >= 0 && strDate <= 9) {
		                strDate = "0" + strDate;
		             }
		         var currentDate = date.getFullYear() + '年' + month + '月' + strDate + '日';
		         return currentDate;
		    }
		/*水印*/
		function shuiyin(canvasid,imgurl,addtext){
		var img = new Image ;
		img.src = imgurl;
		img.onload = function(){
		var canvas = document.getElementById(canvasid);
		var ctx = canvas.getContext("2d");
		ctx.drawImage(img,0,0);
		ctx.font = "14px 微软雅黑";
		ctx.fillStyle = "rgba(252,255,255,0.8)";
		document.getElementById("shuiyinBtn").onclick = function(){
		var date=getDate();
		var addtext =date;
		
		ctx.fillText(addtext,10,50); //选择位置
		}
		}
		}
		/*canvas的id，以及图片路径*/
		shuiyin("shuiyinTest","img/test.jpg")
		function getDate() {
		         var date = new Date();
		         var month = date.getMonth() + 1;
		         var strDate = date.getDate();
		         if (month >= 1 && month <= 9) {
		                 month = "0" + month;
		             }
		         if (strDate >= 0 && strDate <= 9) {
		                strDate = "0" + strDate;
		             }
		         var currentDate = date.getFullYear() + '年' + month + '月' + strDate + '日';
		         return currentDate;
		   }
		</script>
		
		<link rel="stylesheet" type="text/css" href="test.css"/>
	</head>
	<body>		
		<canvas id="shuiyinTest">
		</canvas>		
		<div>		
		<input id="shuiyinText" value="" type="text"/>		
		<button id="shuiyinBtn" class="mui-btn mui-btn-primary" type="button"> 点击添加水印</button><br />
		</div>
	</body>
</html>

想念我的馒头

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
H5 前端JS添加水印

js添加图片水印不好用你抽我、如果需要后台（因为后台有个引包的问题）添加水印加Q931216004拿代码，给个关注呗~<!DOCTYPE html><html> <head> <title></title> <meta charset="UTF-8"/> <script src="test.js" ...
复制链接

扫一扫