添加事件禁止選擇、拖拽、右鍵（簡單的禁止用戶保存圖片，但無法阻止用戶打開控制臺查看，或是直接抓包）將之轉換為 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='' />

傳輸圖片使用自定義格式

該功能需要服務端配合，故而此處贊不實現，可以參考微信讀書，就是將文本轉為 canvas，數據傳輸也進行了加密，可以在很大程度上防止普通用戶想要復制/下載的行為了。

到此這篇關于JavaScript 禁止用戶保存圖片的文章就介紹到這了,更多相關js 禁止保存圖片內容請搜索好吧啦網以前的文章或繼續瀏覽下面的相關文章希望大家以后多多支持好吧啦網！