在Web端完全防止截屏或录屏是非常困难的，因为最终的控制权在于用户使用的设备和浏览器。不过，你可以采取一些措施来增加截屏或录屏的难度，或者在一定程度上警告用户不要进行此类操作。以下是一些方法：
1. 使用HTML5的
<canvas>
和WebGL进行动态绘制
通过在
<canvas>
元素中动态渲染内容，并结合WebGL，可以创建不那么容易被常规截屏工具捕获的内容。但请注意，这并不能阻止专业截屏软件或录屏工具。
<!DOCTYPEhtml><html><head><title>动态画布示例</title></head><body><canvasid="myCanvas"width="500"height="500"></canvas><script>var canvas = document.getElementById('myCanvas');var ctx = canvas.getContext('2d');functiondraw(){
ctx.fillStyle ='rgba(0, 0, 0, 0.1)';
ctx.fillRect(0,0, canvas.width, canvas.height);
ctx.fillStyle ='#f00';
ctx.fillRect(Math.random()* canvas.width, Math.random()* canvas.height,50,50);requestAnimationFrame(draw);}draw();</script></body></html>
2. 显示水印
在页面上叠加透明的动态水印，可以是用户的信息、时间戳或是版权警告，这样即使被截图，也能标识出来源或提醒他人这是受保护的内容。
functionaddWatermark(text){const watermarkDiv = document.createElement('div');
watermarkDiv.style.position ='fixed';
watermarkDiv.style.top =0;
watermarkDiv.style.left =0;
watermarkDiv.style.width ='100%';
watermarkDiv.style.height ='100%';
watermarkDiv.style.zIndex =-1;
watermarkDiv.style.pointerEvents ='none';
watermarkDiv.style.opacity =0.2;
watermarkDiv.style.fontSize ='20px';
watermarkDiv.style.textAlign ='center';
watermarkDiv.style.transform ='rotate(-45deg)';
watermarkDiv.textContent = text;
document.body.appendChild(watermarkDiv);}addWatermark("样本水印 ©2023");
3. 使用DRM（数字版权管理）
对于视频内容，可以考虑使用HTML5的Encrypted Media Extensions (EME)与Content Decryption Module (CDM)来实施DRM保护，但这通常需要与特定的服务提供商合作，并且不能应用于静态网页内容。
4. 法律声明和用户协议
明确告知用户关于内容的版权信息及禁止未经许可的截屏录屏行为，并在用户注册或使用服务前获得同意。虽然这不能从技术上阻止截屏，但可以在法律层面上提供一定的保护。
注意
尽管可以采取上述措施，但请记住，没有任何技术手段能绝对阻止有决心的用户进行截屏或录屏。因此，设计系统时应更多地考虑如何构建信任，以及在内容被不当分享时的应对策略。
标签：
前端
javascript
本文转载自: https://blog.csdn.net/weixin_46730573/article/details/140511317
版权归原作者 GIS-CL 所有， 如有侵权，请联系我们删除。
版权归原作者 GIS-CL 所有， 如有侵权，请联系我们删除。