如何在JS中实现一个用户禁止保存图片功能-创新互联

今天就跟大家聊聊有关如何在JS中实现一个用户禁止保存图片功能，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。

场景

在业务需求中不希望用户保存图片，因为是一些供内部使用的图片。

思路

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

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

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

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

export function preventDefaultListener(e: any) {
 e.preventDefault()
}

;