首页通过canvas实现水印代码

通过canvas实现水印代码

时间: 2023-08-12 18:19:53 浏览: 108

下面是一个使用canvas实现文本水印的示例代码： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Canvas水印</title> <style> #watermark { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } </style> </head> <body> <div id="content"> 这是需要加水印的内容 </div> <canvas id="watermark"></canvas> <script> var canvas = document.getElementById('watermark'); var ctx = canvas.getContext('2d'); // 设置canvas的宽高与页面大小一致 canvas.width = document.documentElement.clientWidth; canvas.height = document.documentElement.clientHeight; // 绘制水印文本 ctx.font = '24px Arial'; ctx.fillStyle = 'rgba(0, 0, 0, 0.1)'; ctx.textAlign = 'center'; ctx.fillText('Watermark', canvas.width / 2, canvas.height / 2); // 将canvas转换为base64格式的图片数据 var base64Url = canvas.toDataURL(); // 将图片添加到页面中作为背景 document.getElementById('content').style.backgroundImage = 'url(' + base64Url + ')'; // 校验图片是否被篡改 var img = new Image(); img.src = base64Url; img.onload = function() { var md5 = calcMD5(base64Url); // 发送MD5值到后台进行比对 console.log(md5); }; // MD5计算函数 function calcMD5(str) { // TODO：使用JS计算MD5值 } </script> </body> </html> ``` 这个示例代码会在页面中添加一个水印，防止用户对内容进行复制或截图。同时，它会计算图片数据的MD5值，并输出到控制台，供后台进行比对。

阅读全文