添加事件禁止选择、拖拽、右键（简单的禁止用户保存图片，但无法阻止用户打开控制台查看，或是直接抓包）
将之转换为 canvas（让浏览器认为不是图片以此禁止用户对之进行图片的操作，但无法阻止抓包）
禁止用户使用控制台查看源码（阻止浏览器打开控制台，但无法阻止抓包）
传输图片使用自定义格式（可以阻止抓包，但需要后台配合）

注：以下内容使用 react+ts 实现

添加事件禁止选择、拖拽、右键

简而言之，这是一种简单有效的方式，能够在用户不打开控制台的情况下阻止用户保存图片。

export function preventDefaultListener(e: any) { e.preventDefault()};<img src={props.url} alt="" style={{ //禁止用户选择 userSelect: 'none', //禁止所有鼠标事件，过于强大，图片仅用于展示可用 // pointerEvents: 'none', }} onTouchStart={preventDefaultListener} onContextMenu={preventDefaultListener} onDragStart={preventDefaultListener}/>

参考：https://patibleAsync(res, () => performance.now() - begin)}/** * 禁止他人调试网站相关方法的集合对象 */export class AntiDebug { /** * 不停循环 debugger 防止有人调试代码 * @returns 取消函数 */ public static cyclingDebugger(): Function { const res = setInterval(() => { debugger }, 100) return () => clearInterval(res) } /** * 检查是否正在 debugger 并调用回调函数 * @param fn 回调函数，默认为重载页面 * @returns 取消函数 */ public static checkDebug( fn: Function = () => window.location.reload(), ): Function { const res = setInterval(() => { const diff = timing(() => { debugger }) if (diff > 500) { console.log(diff) fn() } }, 1000) return () => clearInterval(res) }}useEffect(() => { const cancel1 = AntiDebug.cyclingDebugger() as any const cancel2 = AntiDebug.checkDebug(() => console.log('请不要打开调试'), ) as any return () => { cancel1() cancel2() }}, [])return <img src={url} alt="" />

传输图片使用自定义格式

该功能需要服务端配合，故而此处赞不实现，可以参考微信读书，就是将文本转为 canvas，数据传输也进行了加密，可以在很大程度上防止普通用户想要复制/下载的行为了。

到此这篇关于JavaScript 禁止用户保存图片的文章就介绍到这了,更多相关js 禁止保存图片内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持！