今天就跟大家聊聊有關(guān)如何在JS中實現(xiàn)一個用戶禁止保存圖片功能，可能很多人都不太了解，為了讓大家更加了解，小編給大家總結(jié)了以下內(nèi)容，希望大家根據(jù)這篇文章可以有所收獲。

創(chuàng)新互聯(lián)是一家專注于網(wǎng)站建設(shè)、網(wǎng)站設(shè)計與策劃設(shè)計,宜州網(wǎng)站建設(shè)哪家好?創(chuàng)新互聯(lián)做網(wǎng)站,專注于網(wǎng)站建設(shè)十年,網(wǎng)設(shè)計領(lǐng)域的專業(yè)建站公司;建站業(yè)務(wù)涵蓋:宜州等地區(qū)。宜州做網(wǎng)站價格咨詢:13518219792

場景

在業(yè)務(wù)需求中不希望用戶保存圖片，因為是一些供內(nèi)部使用的圖片。

思路

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

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

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

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

export function preventDefaultListener(e: any) {
 e.preventDefault()
}

;<img
 src={props.url}
 alt=""
 style={{
  //禁止用戶選擇
  userSelect: 'none',
  //禁止所有鼠標事件，過于強大，圖片僅用于展示可用
  // pointerEvents: 'none',
 }}
 onTouchStart={preventDefaultListener}
 onContextMenu={preventDefaultListener}
 onDragStart={preventDefaultListener}
/>

當(dāng)前標題：如何在JS中實現(xiàn)一個用戶禁止保存圖片功能-創(chuàng)新互聯(lián)
瀏覽地址：http://chinadenli.net/article32/jgpsc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供標簽優(yōu)化、品牌網(wǎng)站建設(shè)、小程序開發(fā)、外貿(mào)建站、建站公司、面包屑導(dǎo)航

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)