禁止用户保存图片的几种方法

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

export function preventDefaultListener(e: any) {

 e.preventDefault()

}

 

;<img

 src={props.url}

 alt=""

 style={{

 //禁止用户选择

 userSelect: 'none',

 //禁止所有鼠标事件，过于强大，图片仅用于展示可用

 // pointerEvents: 'none',

 }}

 onTouchStart={preventDefaultListener}

 onContextMenu={preventDefaultListener}

 onDragStart={preventDefaultListener}

/>

 

二、将之转换为 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)

 })

 })

}

 

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="" />

 

转载：https://www.jb51.net/article/185674.htm