JavaScript如何實現(xiàn)禁止用戶保存圖片

export function preventDefaultListener(e: any) {
 e.preventDefault()
}

;<img
 src={props.url}
 alt=""
 style={{
 //禁止用戶選擇
 userSelect: 'none',
 //禁止所有鼠標事件，過于強大，圖片僅用于展示可用
 // pointerEvents: 'none',
 }}
 onTouchStart={preventDefaultListener}
 onContextMenu={preventDefaultListener}
 onDragStart={preventDefaultListener}
/>

export async function imageToCanvas(url: string, canvas: HTMLCanvasElement) {
 return new Promise((resolve, reject) => {
 //新建Image對象，引入當(dāng)前目錄下的圖片
 const img = new Image()
 img.src = url
 const c = canvas.getContext('2d')!

 //圖片初始化完成后調(diào)用
 img.onload = function () {
  //將canvas的寬高設(shè)置為圖像的寬高
  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}
  />
 )

/**
 * 兼容異步函數(shù)的返回值
 * @param res 返回值
 * @param callback 同步/異步結(jié)果的回調(diào)函數(shù)
 * @typeparam T 處理參數(shù)的類型，如果是 Promise 類型，則取出其泛型類型
 * @typeparam Param 處理參數(shù)具體的類型，如果是 Promise 類型，則指定為原類型
 * @typeparam R 返回值具體的類型，如果是 Promise 類型，則指定為 Promise 類型，否則為原類型
 * @returns 處理后的結(jié)果，如果是同步的，則返回結(jié)果是同步的，否則為異步的
 */
export function compatibleAsync<T = any, Param = T | Promise<T>, R = T>(
 res: Param,
 callback: (r: T) => R,
): Param extends Promise<T> &#63; Promise<R> : R {
 return (res instanceof Promise
 &#63; res.then(callback)
 : callback(res as any)) as any
}

/**
 * 測試函數(shù)的執(zhí)行時間
 * 注：如果函數(shù)返回 Promise，則該函數(shù)也會返回 Promise，否則直接返回執(zhí)行時間
 * @param fn 需要測試的函數(shù)
 * @returns 執(zhí)行的毫秒數(shù)
 */
export function timing<R>(
 fn: (...args: any[]) => R,
 // 函數(shù)返回類型是 Promise 的話，則返回 Promise<number>，否則返回 number
): R extends Promise<any> &#63; Promise<number> : number {
 const begin = performance.now()
 const res = fn()
 return compatibleAsync(res, () => performance.now() - begin)
}
/**
 * 禁止他人調(diào)試網(wǎng)站相關(guān)方法的集合對象
 */
export class AntiDebug {
 /**
 * 不停循環(huán) debugger 防止有人調(diào)試代碼
 * @returns 取消函數(shù)
 */
 public static cyclingDebugger(): Function {
 const res = setInterval(() => {
  debugger
 }, 100)
 return () => clearInterval(res)
 }
 /**
 * 檢查是否正在 debugger 并調(diào)用回調(diào)函數(shù)
 * @param fn 回調(diào)函數(shù)，默認為重載頁面
 * @returns 取消函數(shù)
 */
 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('請不要打開調(diào)試'),
 ) as any
 return () => {
 cancel1()
 cancel2()
 }
}, [])

return <img src={url} alt="" />