前端水印的实现主要有两种思路：canvas和dom结构。1.canvas方式性能较好，适合批量生成水印，但内容难以被选中和复制；2.dom结构方式允许用户选中和复制水印内容，但性能相对较差且可能影响页面渲染。为了防止水印被移除，可以采用定时重绘、mutationobserver监听、服务端渲染水印、字体加密等方式。性能优化方面，canvas可通过减少元素数量和使用drawimage提升性能，dom可通过减少元素数量、css sprites、懒加载和虚拟dom优化。水印内容应动态化，结合用户信息由后端或前端生成。同时需平衡用户体验，控制透明度、位置和内容长度，避免影响阅读和视觉体验。
前端水印，简单来说，就是在网页上加上一层肉眼可见的标记，表明版权或者其他信息。实现方式有很多，但核心都是在页面上“画”出来。
解决方案
实现水印效果，主要有两种思路：一是使用Canvas，二是利用DOM结构。Canvas的优势在于性能较好，可以批量生成水印，但缺点是水印内容难以被选中和复制。DOM结构的优势在于水印内容可以被选中和复制，方便用户操作，但缺点是性能相对较差，大量水印可能会影响页面渲染。
立即学习“前端免费学习笔记（深入）”；
Canvas实现水印
创建一个Canvas元素，设置其宽高与页面相同，并将其定位到页面的最顶层。使用Canvas API，在Canvas上绘制水印文字或图片。可以设置水印的字体、颜色、大小、旋转角度等属性。将Canvas元素添加到页面中。监听页面的resize事件，当页面大小发生变化时，重新绘制水印，以保证水印的位置和大小始终与页面匹配。
function addWatermarkCanvas(text) { const canvas = document.createElement('canvas'); canvas.width = document.body.clientWidth; canvas.height = document.body.clientHeight; canvas.style.position = 'fixed'; canvas.style.top = '0'; canvas.style.left = '0'; canvas.style.zIndex = '9999'; canvas.style.pointerEvents = 'none'; // 防止遮挡页面元素 document.body.appendChild(canvas); const ctx = canvas.getContext('2d'); ctx.font = '20px Microsoft YaHei'; ctx.fillStyle = 'rgba(0, 0, 0, 0.2)'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.rotate(-20 * Math.PI / 180); // 旋转角度 const x = canvas.width / 2; const y = canvas.height / 2; ctx.fillText(text, x, y); window.addEventListener('resize', () => { canvas.width = document.body.clientWidth; canvas.height = document.body.clientHeight; ctx.clearRect(0, 0, canvas.width, canvas.height); // 清空画布 ctx.font = '20px Microsoft YaHei'; ctx.fillStyle = 'rgba(0, 0, 0, 0.2)'; ctx.textAlign = 'center'; ctx.textBaseline = 'middle'; ctx.rotate(-20 * Math.PI / 180); ctx.fillText(text, x, y); });}addWatermarkCanvas('版权所有');
DOM结构实现水印
创建一个包含水印文字或图片的DOM元素。设置DOM元素的样式，使其定位到页面的指定位置，并设置透明度。将DOM元素添加到页面中。重复步骤1-3，创建多个水印元素，并将它们添加到页面的不同位置，以实现水印的平铺效果。监听页面的resize事件，当页面大小发生变化时，重新计算水印元素的位置，以保证水印的位置始终与页面匹配。
function addWatermarkDOM(text) { const container = document.createElement('div'); container.style.position = 'fixed'; container.style.top = '0'; container.style.left = '0'; container.style.width = '100%'; container.style.height = '100%'; container.style.zIndex = '9999'; container.style.pointerEvents = 'none'; document.body.appendChild(container); const watermark = document.createElement('div'); watermark.style.position = 'absolute'; watermark.style.top = '50%'; watermark.style.left = '50%'; watermark.style.transform = 'translate(-50%, -50%) rotate(-20deg)'; watermark.style.fontSize = '20px'; watermark.style.color = 'rgba(0, 0, 0, 0.2)'; watermark.textContent = text; container.appendChild(watermark); // 平铺水印 const num = 5; // 水印数量 for (let i = 0; i < num; i++) { for (let j = 0; j { // 重新计算水印位置，这里省略具体实现 });}addWatermarkDOM('版权所有');
如何防止水印被移除？
水印的防护，是个猫鼠游戏。完全防止被移除是不可能的，只能增加移除的难度。
Canvas水印： 可以通过定时器不断重绘水印，即使被移除，也会很快恢复。 还可以监听MutationObserver，当Canvas元素被修改或移除时，重新创建水印。DOM水印： 同样可以使用定时器不断添加水印元素。 也可以监听MutationObserver，当水印元素被修改或移除时，重新创建水印。服务端渲染水印： 在服务端生成带有水印的图片，然后将图片返回给前端。 这种方式可以有效地防止水印被移除，但会增加服务器的压力。字体加密： 自定义字体，将水印文字嵌入到字体文件中。 这样，即使有人想要移除水印，也需要先破解字体文件。
水印的性能优化
大量水印会影响页面性能，需要进行优化。
Canvas水印： 减少Canvas元素的数量，尽量在一个Canvas元素上绘制所有的水印。 使用drawImage方法绘制水印图片，而不是fillText方法绘制水印文字，可以提高性能。DOM水印： 减少DOM元素的数量，尽量使用CSS样式来控制水印的位置和大小。 使用CSS Sprites技术，将多个水印图片合并成一个图片，可以减少HTTP请求。懒加载水印： 只在用户滚动到页面底部时才加载水印。虚拟DOM： 使用虚拟DOM技术，可以减少DOM操作的次数，提高页面渲染性能。
水印内容动态化
水印内容不应该是静态的，可以根据用户的登录状态、IP地址等信息动态生成。
后端生成水印内容： 将用户信息传递给后端，由后端生成水印内容，然后将水印内容返回给前端。前端动态生成水印内容： 在前端获取用户信息，然后使用JavaScript动态生成水印内容。
水印与用户体验
水印虽然可以保护版权，但也会影响用户体验。 需要在保护版权和用户体验之间找到平衡。
水印的透明度： 水印的透明度不宜过高，以免影响用户的阅读体验。水印的位置： 水印的位置不宜过于显眼，以免影响用户的视觉体验。水印的内容： 水印的内容不宜过于冗长，以免影响用户的阅读体验。
总的来说，实现前端水印是一个平衡的过程，需要在安全性、性能和用户体验之间做出权衡。 没有完美的解决方案，只有最适合你的方案。
以上就是js如何实现水印效果 前端页面水印生成与防护方案的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1508148.html
微信扫一扫 
支付宝扫一扫 
