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

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

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

场景

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

思路

• 添加事件禁止选择、拖拽、右键（简单的禁止用户保存图片，但无法阻止用户打开控制台查看，或是直接抓包）
• 将之转换为 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}
/>

当前标题：如何在JS中实现一个用户禁止保存图片功能-创新互联
浏览地址：https://www.cdcxhl.com/article32/jgpsc.html

成都网站建设公司_创新互联，为您提供标签优化、品牌网站建设、小程序开发、外贸建站、建站公司、面包屑导航

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联