React Js中如何禁用右键、禁止图片下载以实现图片保护？

首先明确结论：不存在能100%避免用户获取网页图片的方案，只要图片能在用户设备上正常渲染，就始终存在被截图、抓包提取的可能，所有防护手段都只是提高复制门槛，仅能拦截没有技术基础的普通用户。

以下是你可以逐步添加的防护措施，可基于你现有的img标签调整：

1. 禁止右键直接保存图片 #

你可以给img标签添加右键菜单拦截事件，也可以在图片上层叠加一层透明的div遮罩，避免用户直接选中、右键点击图片本身，修改后的参考代码如下：

<img
    src={pat.name}
    alt=""
    className="absolute "
    style={{
         top: 77,
         left: 20.5,
         zIndex: 2,
         width: 280,
         boxShadow: `0px 4px 8px 2px rgba(3, 21, 49, 0.06)`,
         pointerEvents: 'none', // 直接禁止所有鼠标事件触发在img上
    }}
    onContextMenu={(e) => e.preventDefault()} // 拦截右键菜单
/>

如果用遮罩方案，可以在img同级加一个同等大小、绝对定位的透明div，z-index比图片高1即可。

2. 提高截图盗用成本 #

• 给图片添加肉眼不可见的盲水印，就算用户截图后也可以通过算法提取水印信息，用于后续的版权追溯
• 改用canvas绘制图片，不直接在DOM中暴露img标签的src属性，普通用户无法直接通过元素审查提取图片地址
• 可以将原图切分为多个小切片，前端加载后拼接为完整图，进一步提高直接提取原图的成本

3. 辅助限制手段 #

你可以额外添加网页聚焦状态下的打印屏幕快捷键拦截，不过该限制仅在用户停留在当前页面时生效，用户使用第三方截图工具、系统截图、切出页面截图都无法拦截。

注意：所有技术手段都只能提升盗用门槛，无法完全杜绝图片被获取，建议同时给图片添加明确的版权声明，从法律层面约束盗用行为。

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