前端面试题82（在web端如何防止截屏录屏）

GIS-CL

已于 2024-07-18 08:01:02 修改

阅读量2k

点赞数 5

分类专栏：前端面试题文章标签：前端 javascript

于 2024-07-18 08:00:42 首次发布

本文链接：https://blog.csdn.net/weixin_46730573/article/details/140511317

版权

前端面试题专栏收录该内容

198 篇文章

订阅专栏

在这里插入图片描述
在Web端完全防止截屏或录屏是非常困难的，因为最终的控制权在于用户使用的设备和浏览器。不过，你可以采取一些措施来增加截屏或录屏的难度，或者在一定程度上警告用户不要进行此类操作。以下是一些方法：

1. 使用HTML5的`<canvas>`和WebGL进行动态绘制

通过在<canvas>元素中动态渲染内容，并结合WebGL，可以创建不那么容易被常规截屏工具捕获的内容。但请注意，这并不能阻止专业截屏软件或录屏工具。

<!DOCTYPE html>
<html>
<head>
    <title>动态画布示例</title>
</head>
<body>
    <canvas id="myCanvas" width="500" height="500"></canvas>
    <script>
        var canvas = document.getElementById('myCanvas');
        var ctx = canvas.getContext('2d');

        function draw() {
            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. 显示水印

在页面上叠加透明的动态水印，可以是用户的信息、时间戳或是版权警告，这样即使被截图，也能标识出来源或提醒他人这是受保护的内容。

function addWatermark(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");