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 相关文章推荐
不错的新闻标题颜色效果
Dec 10 Javascript
JavaScript实现表格排序方法
Jun 14 Javascript
讨论html与javascript在浏览器中的加载顺序问题
Nov 27 Javascript
仿百度联盟对联广告实现代码
Aug 30 Javascript
js实现的倒计时按钮实例
Jun 24 Javascript
Bootstrap每天必学之工具提示(Tooltip)插件
Apr 26 Javascript
详解使用angular-cli发布i18n多国语言Angular应用
May 20 Javascript
js匿名函数使用&amp;传参(实例)
Sep 08 Javascript
基于webpack4搭建的react项目框架的方法
Jun 30 Javascript
详解Koa中更方便简单发送响应的方式
Jul 20 Javascript
微信小程序 textarea 层级过高问题简单解决方案
Oct 14 Javascript
基于vuex实现购物车功能
Jan 10 Vue.js
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
YB217、YB235、YB400浅听
2021/03/02 无线电
PHP header函数分析详解
2011/08/06 PHP
php中限制ip段访问、禁止ip提交表单的代码分享
2014/08/22 PHP
php利用cookies实现购物车的方法
2014/12/10 PHP
总结PHP内存释放以及垃圾回收
2018/03/29 PHP
jQuery 使用手册(一)
2009/09/23 Javascript
JS 动态获取节点代码innerHTML分析 [IE,FF]
2009/11/30 Javascript
javascript生成大小写字母
2015/07/03 Javascript
js基于面向对象实现网页TAB选项卡菜单效果代码
2015/09/09 Javascript
JS实现淘宝支付宝网站的控制台菜单效果
2015/09/28 Javascript
AngularJs Managing Service Dependencies详解
2016/09/02 Javascript
vue.js实现用户评论、登录、注册、及修改信息功能
2020/05/30 Javascript
vue实现全选和反选功能
2017/08/31 Javascript
如何开发出更好的JavaScript模块
2017/12/22 Javascript
微信小程序中如何计算距离某个节日还有多少天
2019/07/15 Javascript
vue路由守卫及路由守卫无限循环问题详析
2019/09/05 Javascript
js this 绑定机制深入详解
2020/04/30 Javascript
基于vue+element实现全局loading过程详解
2020/07/10 Javascript
[04:13]2014DOTA2国际邀请赛 专访DC目前形势不容乐观
2014/07/12 DOTA
利用Python实现Windows下的鼠标键盘模拟的实例代码
2017/07/13 Python
python opencv之SIFT算法示例
2018/02/24 Python
pytz格式化北京时间多出6分钟问题的解决方法
2019/06/21 Python
python实现XML解析的方法解析
2019/11/16 Python
CSS3 透明色 RGBA使用介绍
2013/08/06 HTML / CSS
英国最大的网上药品商店:Chemist Direct
2017/12/16 全球购物
澳大利亚女性快速时尚零售商:Ally Fashion
2018/04/25 全球购物
一套VC试题
2015/01/23 面试题
客服工作职责
2013/12/11 职场文书
单位人事专员介绍信
2014/01/11 职场文书
公司会议开幕词
2015/01/29 职场文书
幼儿园中班个人总结
2015/02/28 职场文书
2014年度个人总结范文
2015/03/09 职场文书
客户经理岗位职责大全
2015/04/09 职场文书
看雷锋电影观后感
2015/06/10 职场文书
vue3使用vuedraggable实现拖拽功能
2022/04/06 Vue.js
《金肉人》米特&《航海王》阿鹤声优松岛实因胰脏癌去世 享寿81岁
2022/04/13 日漫