防止图片被保存的几种有效方法

本文深入剖析了网页图片防盗的技术现实与可行策略，明确指出“完全禁止保存图片”在技术上根本不可行——因为只要图片被浏览器解码并渲染，就已处于用户可控环境，截图、开发者工具、网络面板抓取等手段始终有效；真正务实的做法是分层设防：前端通过禁用右键、阻止拖拽选中、Canvas 渲染等方式提高普通用户操作门槛，后端则需配合临时令牌鉴权、Referer 校验等机制限制非法直链，同时强调水印标识、版权声明和法律保障才是保护数字内容的核心防线——技术只是延缓盗用，而非杜绝盗用。

禁用右键菜单阻止图片另存为

浏览器原生右键菜单里“图片另存为”是最直接的保存路径，禁用它能挡住大部分普通用户。但注意：这只是表层防护，不防截图、开发者工具或网络面板下载。

• 给 或整个页面加 oncontextmenu="return false" 即可拦截右键事件
• 更稳妥的做法是绑定到 document： document.addEventListener('contextmenu', e => e.preventDefault())
• 别只对单张图加，否则用户点空白处再右键仍能打开菜单；也别漏掉移动端——touchstart + 长按模拟也需要处理

CSS 禁止选中和拖拽图片

防止用户拖拽图片到桌面，或选中后复制（虽然图片本身不能被“复制”，但拖拽行为会触发下载）。

• 给图片加样式：user-select: none; -webkit-user-drag: none;
• 必须同时写 -webkit-user-drag 和 user-drag（后者是实验性标准，支持度低，但加了没坏处）
• 如果图片在 标签里，记得给 也加 draggable="false"，否则 Chrome 仍可能触发拖拽

服务端返回不可直链的图片响应头