這篇文章主要為大家展示了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="" />傳輸圖片使用自定義格式
該功能需要服務端配合，故而此處贊不實現，可以參考微信讀書，就是將文本轉為 canvas，數據傳輸也進行了加密，可以在很大程度上防止普通用戶想要復制/下載的行為了。
以上就是關于JavaScript如何實現禁止用戶保存圖片的內容，如果你們有學習到知識或者技能，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
