添加事件禁止選擇、拖拽、右鍵（簡(jiǎn)單的禁止用戶保存圖片，但無(wú)法阻止用戶打開控制臺(tái)查看，或是直接抓包）將之轉(zhuǎn)換為 canvas（讓瀏覽器認(rèn)為不是圖片以此禁止用戶對(duì)之進(jìn)行圖片的操作，但無(wú)法阻止抓包）禁止用戶使用控制臺(tái)查看源碼（阻止瀏覽器打開控制臺(tái)，但無(wú)法阻止抓包）傳輸圖片使用自定義格式（可以阻止抓包，但需要后臺(tái)配合）

注：以下內(nèi)容使用 react+ts 實(shí)現(xiàn)

添加事件禁止選擇、拖拽、右鍵

簡(jiǎn)而言之，這是一種簡(jiǎn)單有效的方式，能夠在用戶不打開控制臺(tái)的情況下阻止用戶保存圖片。

export function preventDefaultListener(e: any) { e.preventDefault()};<img src={props.url} alt='' style={{ //禁止用戶選擇 userSelect: ’none’, //禁止所有鼠標(biāo)事件，過(guò)于強(qiáng)大，圖片僅用于展示可用 // pointerEvents: ’none’, }} onTouchStart={preventDefaultListener} onContextMenu={preventDefaultListener} onDragStart={preventDefaultListener}/>

參考：https://www.jb51.net/article/185677.htm

將之轉(zhuǎn)換為 canvas

另一種思路是將圖片轉(zhuǎn)換為 canvas 避免用戶使用img相關(guān)的操作。

將圖片轉(zhuǎn)成 canvas

export async function imageToCanvas(url: string, canvas: HTMLCanvasElement) { return new Promise((resolve, reject) => { //新建Image對(duì)象，引入當(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) }) })}

禁用 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} /> )

禁止用戶使用控制臺(tái)查看源碼

如果能禁止用戶操作控制臺(tái)，那么自然能夠避免用戶查看源碼了，下面是一個(gè)簡(jiǎn)單的實(shí)現(xiàn)。

/** * 兼容異步函數(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> ? Promise<R> : R { return (res instanceof Promise ? res.then(callback) : callback(res as any)) as any}/** * 測(cè)試函數(shù)的執(zhí)行時(shí)間 * 注：如果函數(shù)返回 Promise，則該函數(shù)也會(huì)返回 Promise，否則直接返回執(zhí)行時(shí)間 * @param fn 需要測(cè)試的函數(shù) * @returns 執(zhí)行的毫秒數(shù) */export function timing<R>( fn: (...args: any[]) => R, // 函數(shù)返回類型是 Promise 的話，則返回 Promise<number>，否則返回 number): R extends Promise<any> ? Promise<number> : number { const begin = performance.now() const res = fn() return compatibleAsync(res, () => performance.now() - begin)}/** * 禁止他人調(diào)試網(wǎng)站相關(guān)方法的集合對(duì)象 */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ù)，默認(rèn)為重載頁(yè)面 * @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(’請(qǐng)不要打開調(diào)試’), ) as any return () => { cancel1() cancel2() }}, [])return <img src={url} alt='' />

傳輸圖片使用自定義格式

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

到此這篇關(guān)于JavaScript 禁止用戶保存圖片的文章就介紹到這了,更多相關(guān)js 禁止保存圖片內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！