JavaScript如何实现禁止用户保存图片

这篇文章主要为大家展示了JavaScript如何实现禁止用户保存图片,内容简而易懂,希望大家可以学习一下,学习完之后肯定会有收获的,下面让小编带大家一起来看看吧。

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

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

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

导出功能preventDefaultListener (e:有){
　　e.preventDefault ()
　　}
　　
　　& lt; img
　　src=https://www.yisu.com/zixun/{props.url}
　　alt=" "
　　风格={{//禁止用户选择
　　userSelect:“没有”,//禁止所有鼠标事件,过于强大,图片仅用于展示可用//pointerEvents:“没有”,
　　}}>出口异步函数imageToCanvas (url:字符串、帆布:HTMLCanvasElement) {
　　返回新的承诺((解决,拒绝)=比;{//新建形象对象,引入当前目录下的图片
　　const img=新形象()
　　img。src=https://www.yisu.com/zixun/url
　　const c=canvas.getContext (2 d) !//图片初始化完成后调用
　　img。onload=function () {//将画布的宽高设置为图像的宽高
　　画布。宽度=img.width
　　画布。身高=img.height//帆布画图片
　　c。drawImage (img, 0, 0, img。宽度,img.height)
　　解决()
　　}
　　img。addEventListener(“错误”,(e)=> {
　　拒绝(e)
　　})
　　})
　　}

禁用帆布事件

 const throwFn=()=比;{
　　把新的错误(
　　“未捕获DOMException:未能执行& # 39;toDataURL& # 39;>/* *
　　*兼容异步函数的返回值
　　* @param res返回值
　　* @param调同步/异步结果的回调函数
　　* @typeparam T处理参数的类型,如果是承诺类型,则取出其泛型类型
　　* @typeparam Param处理参数具体的类型,如果是承诺类型,则指定为原类型
　　* @typeparam R返回值具体的类型,如果是承诺类型,则指定类为承诺型,否则为原类型
　　* @returns处理后的结果,如果是同步的,则返回结果是同步的,否则为异步的
　　*/导出功能compatibleAsync R=T> (
　　res: Param,
　　回调:(r: T)=比;R,
　　):Param延伸Promise,# 63;PromiseR: {
　　返回(res instanceof承诺
　　,# 63;res.then(回调)
　　:回调(res)一样)
　　}/* *
　　*测试函数的执行时间
　　*注:如果函数返回承诺,则该函数也会返回承诺,否则直接返回执行时间
　　* @param fn需要测试的函数
　　* @returns执行的毫秒数
　　*/导出功能timing (
　　fn: (…参数:任何[])=比;R,//函数返回类型是承诺的话,则返回Promise,# 63;Promise数量:{
　　const开始=performance.now ()
　　const res=fn ()
　　(返回compatibleAsync (res)=比;performance.now()——开始)
　　}/* *
　　*禁止他人调试网站相关方法的集合对象
　　*/出口类AntiDebug {/* *
　　*不停循环调试器防止有人调试代码
　　* @returns取消函数
　　*/公共静态cyclingDebugger():函数{
　　const res=setInterval(()=比;{
　　调试器
　　},100)
　　返回()=比;clearInterval (res)
　　}/* *
　　*检查是否正在调试器并调用回调函数
　　* @param fn回调函数,默认为重载页面
　　* @returns取消函数
　　*/公共静态checkDebug (
　　fn:=()函数=比;window.location.reload (),
　　):函数{
　　const res=setInterval(()=比;{
　　const diff=时间(()=比;{
　　调试器
　　})
　　如果(diff比;500){
　　console.log (diff)
　　fn ()
　　}
　　}, 1000)
　　返回()=比;clearInterval (res)
　　}
　　}