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

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

创新互联是一家专注于网站建设、网站设计与策划设计,宜州网站建设哪家好?创新互联做网站,专注于网站建设十年,网设计领域的专业建站公司;建站业务涵盖:宜州等地区。宜州做网站价格咨询:13518219792

场景

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

思路

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

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

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

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

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

;

网页题目:如何在JS中实现一个用户禁止保存图片功能-创新互联
文章分享:http://pwwzsj.com/article/jgpsc.html