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

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

場(chǎng)景

在業(yè)務(wù)需求中不希望用戶保存圖片，因?yàn)槭且恍┕﹥?nèi)部使用的圖片。

思路

• 添加事件禁止選擇、拖拽、右鍵（簡(jiǎn)單的禁止用戶保存圖片，但無法阻止用戶打開控制臺(tái)查看，或是直接抓包）
• 將之轉(zhuǎn)換為 canvas（讓瀏覽器認(rèn)為不是圖片以此禁止用戶對(duì)之進(jìn)行圖片的操作，但無法阻止抓包）
• 禁止用戶使用控制臺(tái)查看源碼（阻止瀏覽器打開控制臺(tái)，但無法阻止抓包）
• 傳輸圖片使用自定義格式（可以阻止抓包，但需要后臺(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)事件，過于強(qiáng)大，圖片僅用于展示可用
  // pointerEvents: 'none',
 }}
 onTouchStart={preventDefaultListener}
 onContextMenu={preventDefaultListener}
 onDragStart={preventDefaultListener}
/>

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

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

廣告

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