前端利用canvas绘制水印

阳光穿透心脏的1/2处 2023-03-13 02:29 100阅读 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>

效果

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hSTTI0NTQ_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hSTTI0NTQ_size_16_color_FFFFFF_t_70]: /images/20230312/bfebae40aac94607934d0c61c710592c.png