前端利用canvas绘制水印

最新推荐文章于 2024-07-28 18:26:16 发布

凉音、

最新推荐文章于 2024-07-28 18:26:16 发布

阅读量340

点赞数

分类专栏： javascript canvas 文章标签： js canvas javascript

本文链接：https://blog.csdn.net/HRM2454/article/details/106025913

版权

javascript 同时被 2 个专栏收录

33 篇文章 0 订阅

订阅专栏

canvas

1 篇文章 0 订阅

订阅专栏

// watermark.js

// text: 水印文字
function watermarkByCanvas(text) {
	var id = '1.23452384164.123412415';
	var confg = {
		canvasSize: 200,
		canvasFontSize: '14px sans-serif',
		canvasTextColor: 'rgba(200, 200, 200, 0.30)',
		canvasRotate: -30 * Math.PI / 180,
		canvasTextAlign: 'left',
		canvasTextBaseline: 'middle',
		canvasTextFillX: -25,
		canvasTextFillY: 80
	}
	
	document.getElementById(id) && document.body.removeChild(document.getElementById(id));

	var can = document.createElement('canvas'),
		cans = can.getContext('2d'),
		div = document.createElement('div');

	can.width = confg.canvasSize;
	can.height = confg.canvasSize;

	cans.rotate(confg.canvasRotate);
	cans.font = confg.canvasFontSize;
	cans.fillStyle = confg.canvasTextColor;
	cans.textAlign = confg.canvasTextAlign;
	cans.textBaseline = confg.canvasTextBaseline;
	cans.fillText(text, confg.canvasTextFillX, confg.canvasTextFillY);

	div.id = id;
	div.style.pointerEvents = 'none';
	div.style.top = '0';
	div.style.left = '0';
	div.style.bottom = '0';
	div.style.right = '0';
	div.style.position = 'fixed';
	div.style.zIndex = '100000';
	div.style.background = 'url(' + can.toDataURL('image/png') + ') left top repeat';
	document.body.appendChild(div);
}

使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/watermark.js"></script>
	</head>
	<body>
	</body>
	<script>
		watermarkByCanvas('CSDN 20200509')
	</script>
</html>

效果