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

2023-07-26 12:40:03 72

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

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

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

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

exportfunctionpreventDefaultListener(e:any){
e.preventDefault()
}

;

参考：https://www.nhooo.com/article/185677.htm

将之转换为canvas

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

将图片转成canvas

exportasyncfunctionimageToCanvas(url:string,canvas:HTMLCanvasElement){
returnnewPromise((resolve,reject)=>{
//新建Image对象，引入当前目录下的图片
constimg=newImage()
img.src=url
constc=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事件

constthrowFn=()=>{
thrownewError(
"UncaughtDOMException:Failedtoexecute'toDataURL'on'HTMLCanvasElement':Taintedcanvasesmaynotbeexported.",
)
}

const$canvasRef=useRef(null)
useEffect(()=>{
;(async()=>{
awaitimageToCanvas(props.url,$canvasRef.current!)
$canvasRef.current!.toBlob=throwFn
$canvasRef.current!.toDataURL=throwFn
})()
},[])
return(

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

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

/**
*兼容异步函数的返回值
*@paramres返回值
*@paramcallback同步/异步结果的回调函数
*@typeparamT处理参数的类型，如果是Promise类型，则取出其泛型类型
*@typeparamParam处理参数具体的类型，如果是Promise类型，则指定为原类型
*@typeparamR返回值具体的类型，如果是Promise类型，则指定为Promise类型，否则为原类型
*@returns处理后的结果，如果是同步的，则返回结果是同步的，否则为异步的
*/
exportfunctioncompatibleAsync,R=T>(
res:Param,
callback:(r:T)=>R,
):ParamextendsPromise?Promise:R{
return(resinstanceofPromise
?res.then(callback)
:callback(resasany))asany
}

/**
*测试函数的执行时间
*注：如果函数返回Promise，则该函数也会返回Promise，否则直接返回执行时间
*@paramfn需要测试的函数
*@returns执行的毫秒数
*/
exportfunctiontiming(
fn:(...args:any[])=>R,
//函数返回类型是Promise的话，则返回Promise，否则返回number
):RextendsPromise?Promise:number{
constbegin=performance.now()
constres=fn()
returncompatibleAsync(res,()=>performance.now()-begin)
}
/**
*禁止他人调试网站相关方法的集合对象
*/
exportclassAntiDebug{
/**
*不停循环debugger防止有人调试代码
*@returns取消函数
*/
publicstaticcyclingDebugger():Function{
constres=setInterval(()=>{
debugger
},100)
return()=>clearInterval(res)
}
/**
*检查是否正在debugger并调用回调函数
*@paramfn回调函数，默认为重载页面
*@returns取消函数
*/
publicstaticcheckDebug(
fn:Function=()=>window.location.reload(),
):Function{
constres=setInterval(()=>{
constdiff=timing(()=>{
debugger
})
if(diff>500){
console.log(diff)
fn()
}
},1000)
return()=>clearInterval(res)
}
}

useEffect(()=>{
constcancel1=AntiDebug.cyclingDebugger()asany
constcancel2=AntiDebug.checkDebug(()=>
console.log('请不要打开调试'),
)asany
return()=>{
cancel1()
cancel2()
}
},[])

return

传输图片使用自定义格式

该功能需要服务端配合，故而此处赞不实现，可以参考微信读书，就是将文本转为canvas，数据传输也进行了加密，可以在很大程度上防止普通用户想要复制/下载的行为了。

到此这篇关于JavaScript禁止用户保存图片的文章就介绍到这了,更多相关js禁止保存图片内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！

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

热门推荐

随机推荐