幽灵资源网 Design By www.bzswh.com
添加事件禁止选择、拖拽、右键(简单的禁止用户保存图片,但无法阻止用户打开控制台查看,或是直接抓包)
将之转换为 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://www.jb51.net/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> "htmlcode">useEffect(() => { const cancel1 = AntiDebug.cyclingDebugger() as any const cancel2 = AntiDebug.checkDebug(() => console.log('请不要打开调试'), ) as any return () => { cancel1() cancel2() } }, []) return <img src={url} alt="" />传输图片使用自定义格式
该功能需要服务端配合,故而此处赞不实现,可以参考微信读书,就是将文本转为 canvas,数据传输也进行了加密,可以在很大程度上防止普通用户想要复制/下载的行为了。
幽灵资源网 Design By www.bzswh.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
幽灵资源网 Design By www.bzswh.com
暂无评论...