JavaScript 禁止用户保存图片的实现代码


Posted in Javascript onApril 28, 2020

添加事件禁止选择、拖拽、右键(简单的禁止用户保存图片,但无法阻止用户打开控制台查看,或是直接抓包)
将之转换为 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://3water.com/article/185677.htm

将之转换为 canvas

另一种思路是将图片转换为 canvas 避免用户使用img相关的操作。

将图片转成 canvas

export async function imageToCanvas(url: string, canvas: HTMLCanvasElement) {
 return new Promise((resolve, reject) => {
 //新建Image对象,引入当前目录下的图片
 const img = new Image()
 img.src = url
 const c = canvas.getContext('2d')!

 //图片初始化完成后调用
 img.onload = function () {
  //将canvas的宽高设置为图像的宽高
  canvas.width = img.width
  canvas.height = img.height

  //canvas画图片
  c.drawImage(img, 0, 0, img.width, img.height)
  resolve()
 }
 img.addEventListener('error', (e) => {
  reject(e)
 })
 })
}

禁用 canvas 事件

const throwFn = () => {
 throw new Error(
 "Uncaught DOMException: Failed to execute 'toDataURL' on 'HTMLCanvasElement': Tainted canvases may not be exported.",
 )
}

const $canvasRef = useRef<HTMLCanvasElement>(null)
 useEffect(() => {
  ;(async () => {
   await imageToCanvas(props.url, $canvasRef.current!)
   $canvasRef.current!.toBlob = throwFn
   $canvasRef.current!.toDataURL = throwFn
  })()
 }, [])
 return (
  <canvas
   ref={$canvasRef}
   onTouchStart={preventDefaultListener}
   onContextMenu={preventDefaultListener}
  />
 )

禁止用户使用控制台查看源码

如果能禁止用户操作控制台,那么自然能够避免用户查看源码了,下面是一个简单的实现。

/**
 * 兼容异步函数的返回值
 * @param res 返回值
 * @param callback 同步/异步结果的回调函数
 * @typeparam T 处理参数的类型,如果是 Promise 类型,则取出其泛型类型
 * @typeparam Param 处理参数具体的类型,如果是 Promise 类型,则指定为原类型
 * @typeparam R 返回值具体的类型,如果是 Promise 类型,则指定为 Promise 类型,否则为原类型
 * @returns 处理后的结果,如果是同步的,则返回结果是同步的,否则为异步的
 */
export function compatibleAsync<T = any, Param = T | Promise<T>, R = T>(
 res: Param,
 callback: (r: T) => R,
): Param extends Promise<T> ? Promise<R> : R {
 return (res instanceof Promise
 ? res.then(callback)
 : callback(res as any)) as any
}

/**
 * 测试函数的执行时间
 * 注:如果函数返回 Promise,则该函数也会返回 Promise,否则直接返回执行时间
 * @param fn 需要测试的函数
 * @returns 执行的毫秒数
 */
export function timing<R>(
 fn: (...args: any[]) => R,
 // 函数返回类型是 Promise 的话,则返回 Promise<number>,否则返回 number
): R extends Promise<any> ? Promise<number> : number {
 const begin = performance.now()
 const res = fn()
 return compatibleAsync(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 禁止保存图片内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
javascript 实现父窗口引用弹出窗口的值的脚本
Aug 07 Javascript
js使用for循环查询数组中是否存在某个值
Aug 12 Javascript
jQuery实现仿腾讯迷你首页选项卡效果代码
Sep 17 Javascript
下雪了 javascript实现雪花飞舞
Aug 02 Javascript
聊聊JavaScript如何实现继承及特点
Apr 07 Javascript
jquery append与appendTo方法比较
May 24 jQuery
关于webpack代码拆分的解析
Jul 20 Javascript
详解使用angular的HttpClient搭配rxjs
Sep 01 Javascript
AngularJS实现的输入框字数限制提醒功能示例
Oct 26 Javascript
详解vue-cli快速构建vue应用并实现webpack打包
Dec 13 Javascript
如何在vue中使用jointjs过程解析
May 29 Javascript
vue实现动态表格提交参数动态生成控件的操作
Nov 09 Javascript
JS求解两数之和算法详解
Apr 28 #Javascript
jQuery插件simplePagination的使用方法示例
Apr 28 #jQuery
uni-app如何页面传参数的几种方法总结
Apr 28 #Javascript
JavaScript 双向链表操作实例分析【创建、增加、查找、删除等】
Apr 28 #Javascript
JS 创建对象的模式实例小结
Apr 28 #Javascript
JavaScript console的使用方法实例分析
Apr 28 #Javascript
Node.js设置定时任务之node-schedule模块的使用详解
Apr 28 #Javascript
You might like
天津市收音机工业发展史
2021/03/04 无线电
PHP出错界面
2006/10/09 PHP
新手配置 PHP 调试环境(IIS+PHP+MYSQL)
2007/01/10 PHP
PHP中使用虚代理实现延迟加载技术
2014/11/05 PHP
基于PHP实现堆排序原理及实例详解
2020/06/19 PHP
JavaScript lastIndexOf方法入门实例(计算指定字符在字符串中最后一次出现的位置)
2014/10/17 Javascript
自定义百度分享的分享按钮
2015/03/18 Javascript
jquery模拟进度条实现方法
2015/08/03 Javascript
JavaScript用构造函数如何获取变量的类型名
2016/12/23 Javascript
Ajax异步文件上传与NodeJS express服务端处理
2017/04/01 NodeJs
详解关于react-redux中的connect用法介绍及原理解析
2017/09/11 Javascript
浅谈Vue数据绑定的原理
2018/01/08 Javascript
简易Vue评论框架的实现(父组件的实现)
2018/01/08 Javascript
AngularJS中的作用域实例分析
2018/05/16 Javascript
详解原生JS动态添加和删除类
2019/03/26 Javascript
js逆向解密之网络爬虫
2019/05/30 Javascript
js利用递归与promise 按顺序请求数据的方法
2019/08/30 Javascript
Vue之Mixins(混入)的使用方法
2019/09/24 Javascript
vue中的使用token的方法示例
2020/03/10 Javascript
vscode自定义vue模板的实现
2021/01/27 Vue.js
[01:05:30]VP vs TNC 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
浅谈python jieba分词模块的基本用法
2017/11/09 Python
python+matplotlib演示电偶极子实例代码
2018/01/12 Python
解决Python2.7中IDLE启动没有反应的问题
2018/11/30 Python
浅谈pytorch grad_fn以及权重梯度不更新的问题
2019/08/20 Python
opencv设置采集视频分辨率方式
2019/12/10 Python
详解tensorflow2.x版本无法调用gpu的一种解决方法
2020/05/25 Python
python dict乱码如何解决
2020/06/07 Python
Simons官方网站:加拿大时尚零售商
2020/02/20 全球购物
英国最受欢迎的母婴精品品牌:JoJo Maman BéBé
2021/02/17 全球购物
Prototype如何为一个Ajax添加一个参数
2015/12/06 面试题
成人毕业生自我鉴定
2013/10/18 职场文书
应届生财务管理求职信
2013/11/06 职场文书
会务接待方案
2014/02/27 职场文书
乡镇创先争优活动总结
2014/08/28 职场文书
五一晚会主持词
2015/07/01 职场文书