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に変換する。
もう一つの考えは、ピクチャを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="" />

画像を転送するにはカスタムフォーマットを使用します。
この機能は、サーバーとの連携が必要ですので、ここでは実現できないと思います。WeChatで読書するを参照して、テキストをcanvasに変換し、データ転送も暗号化されています。普通のユーザがコピーしたい/ダウンロードしたいという行為をかなり防ぐことができます。
ここでは、JavaScriptがユーザーの写真保存を禁止する文章について紹介します。詳細に関連しては、jsは写真の保存を禁止しています。以前の文章を検索したり、下記の関連記事を見たりしてください。これからもよろしくお願いします。