場景

在業務需求中不希望用戶保存圖片，因為是一些供內部使用的圖片。

思路

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

將之轉換為 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) }}

傳輸圖片使用自定義格式

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

總結

如同所有的前端限制用戶的技術一樣，這是一個沒有終點的斗爭。。。

以上就是JavaScript 如何禁止用戶保存圖片的詳細內容，更多關于JavaScript 禁止保存圖片的資料請關注好吧啦網其它相關文章！