如何实现网站图片防截图？参考Netflix录屏黑屏机制

首先明确：完全阻止截图是不可能实现的——截图本质是捕获屏幕或显卡输出的像素信息，专业工具总能找到绕过方式。但可以通过一些方案实现类似Netflix的防录屏/截图效果，提升截图门槛，针对普通场景或非专业用户起到保护作用。

一、类Netflix的DRM硬件级保护（效果最好，但落地成本极高） #

Netflix的黑屏防录屏核心依赖DRM（数字版权管理）技术：内容被加密后，直接在显卡硬件层面解码渲染，完全不经过系统的普通帧缓冲区，普通录屏工具无法捕获到有效画面，只能得到黑屏。

但这种方案几乎无法直接适配图片：主流DRM方案（如Widevine、PlayReady）主要针对视频流优化，图片的DRM支持度极低，且需要浏览器、显卡、操作系统的全链路协同支持，中小网站基本没有落地的可行性。如果是视频内容，Web端可以通过HTML5的EME（Encrypted Media Extensions）API对接DRM服务商，但图片场景不推荐。

二、前端低成本干扰方案（针对普通用户） #

这类方案无法阻止专业截图工具，但能大幅降低普通用户截图的可用性：

• 动态干扰层叠加：在图片上方覆盖半透明、快速变化的干扰元素（比如闪烁的点阵、随机纹理），截图后会严重破坏图片的可读性。
  示例代码：

  <!-- 包裹图片和干扰层的容器 -->
  <div style="position: relative; display: inline-block;">
    <img src="your-target-image.jpg" alt="需要保护的图片">
    <!-- 动态闪烁的干扰层 -->
    <div style="
      position: absolute;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: repeating-linear-gradient(45deg, rgba(0,0,0,0.12) 0, rgba(0,0,0,0.12) 2px, transparent 2px, transparent 4px);
      pointer-events: none;
      animation: flicker 0.15s infinite alternate;
    "></div>
  </div>
  
  <style>
    @keyframes flicker {
      0% { opacity: 0.4; }
      100% { opacity: 0.7; }
    }
  </style>
  

• 实时像素微修改：通过JS每隔极短时间微调图片的局部色相、亮度或像素偏移，普通单帧截图会出现失真，连续录屏则会产生闪烁效果。
• 限制基础交互：禁用右键菜单、禁止页面元素选择，减少普通用户通过系统自带功能快速截图的途径：

  // 禁用右键菜单
  document.addEventListener('contextmenu', e => e.preventDefault());
  // 禁止选择页面元素
  document.addEventListener('selectstart', e => e.preventDefault());
  

三、录屏检测与响应（主动触发保护） #

通过前端API检测疑似录屏行为，触发图片隐藏或替换为黑屏：

• 利用navigator.mediaDevices.getDisplayMedia()API间接检测：当有录屏工具捕获屏幕时，调用该API会触发授权提示，若用户允许（或工具绕过授权），则可以判断存在录屏行为，进而隐藏目标图片。
  示例代码（仅作参考，存在误判可能）：

  function protectImageOnCapture() {
    const protectedImg = document.querySelector('.protected-image');
    const placeholder = document.createElement('div');
    placeholder.style.width = protectedImg.width + 'px';
    placeholder.style.height = protectedImg.height + 'px';
    placeholder.style.backgroundColor = '#000';
    protectedImg.parentNode.insertBefore(placeholder, protectedImg);
  
    async function checkCapture() {
      try {
        const stream = await navigator.mediaDevices.getDisplayMedia({ video: true });
        stream.getTracks().forEach(t => t.stop());
        // 检测到录屏，隐藏图片显示黑屏
        protectedImg.style.display = 'none';
        placeholder.style.display = 'block';
      } catch (err) {
        // 无录屏行为，恢复图片显示
        protectedImg.style.display = 'block';
        placeholder.style.display = 'none';
      }
    }
    // 每2秒检测一次
    setInterval(checkCapture, 2000);
  }
  
  // 页面加载完成后执行
  window.addEventListener('load', protectImageOnCapture);
  

  注意：这种方案的准确率有限，部分专业录屏工具可以绕过检测，且浏览器兼容性参差不齐。

总结来说，没有完美的图片防截图方案，所有方案都只能提升截图门槛。如果追求类似Netflix的硬件级保护，图片场景基本无法实现；前端干扰和检测方案适合普通场景，能有效阻止非专业用户的截图行为。

内容的提问来源于stack exchange，提问作者Pavel Halko