JavaScript 는 사용자 가 그림 을 저장 하 는 실현 코드 를 금지 합 니 다.

이벤트 추가 선택,드래그,오른쪽 단추 금지(사용자 가 그림 을 저장 하 는 것 을 간단하게 금지 하지만,사용자 가 콘 솔 을 열 어 보 거나 직접 가방 을 잡 는 것 을 막 을 수 없습니다)
이 를 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 로 전환 하여 사용자 가 사용 하지 않도록 하 는 것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> ? 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="" />

그림 전송 사용자 정의 형식 사용
이 기능 은 서버 의 협조 가 필요 하기 때문에 여기 서 칭찬 이 이 루어 지지 않 습 니 다.참고위 챗 독서할 수 있 습 니 다.텍스트 를 canvas 로 바 꾸 고 데이터 전송 도 암호 화 되 어 일반 사용자 가 복사/다운로드 하려 는 행 위 를 어느 정도 방지 할 수 있 습 니 다.
자 바스 크 립 트 에서 사용자 가 그림 을 저장 하지 못 하 게 하 는 것 에 관 한 이 글 은 여기까지 소개 되 었 습 니 다.더 많은 관련 js 에서 그림 을 저장 하지 못 하 게 하 는 내용 은 우리 의 이전 글 을 검색 하거나 아래 의 관련 글 을 계속 조회 하 시기 바 랍 니 다.앞으로 많은 응원 바 랍 니 다!