电脑知识|欧美黑人一区二区三区|软件|欧美黑人一级爽快片淫片高清|系统|欧美黑人狂野猛交老妇|数据库|服务器|编程开发|网络运营|知识问答|技术教程文章 - 好吧啦网

您的位置:首頁技術(shù)文章
文章詳情頁

JavaScript 禁止用戶保存圖片的實(shí)現(xiàn)代碼

瀏覽:3日期:2023-06-21 13:56:18

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

注:以下內(nèi)容使用 react+ts 實(shí)現(xià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}/>

參考: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è)簡單的實(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}/** * 測試函數(shù)的執(zhí)行時(shí)間 * 注:如果函數(shù)返回 Promise,則該函數(shù)也會(huì)返回 Promise,否則直接返回執(zhí)行時(shí)間 * @param fn 需要測試的函數(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)為重載頁面 * @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)!

標(biāo)簽: JavaScript
相關(guān)文章:
主站蜘蛛池模板: 深圳市源和塑胶电子有限公司-首页 | 干式变压器厂_干式变压器厂家_scb11/scb13/scb10/scb14/scb18干式变压器生产厂家-山东科锐变压器有限公司 | 锂电池砂磨机|石墨烯砂磨机|碳纳米管砂磨机-常州市奥能达机械设备有限公司 | 集装箱展厅-住人集装箱住宿|建筑|房屋|集装箱售楼处-山东锐嘉科技工程有限公司 | 东莞工厂厂房装修_无尘车间施工_钢结构工程安装-广东集景建筑装饰设计工程有限公司 | 苏州工作服定做-工作服定制-工作服厂家网站-尺品服饰科技(苏州)有限公司 | 棉服定制/厂家/公司_棉袄订做/价格/费用-北京圣达信棉服 | 粘度计维修,在线粘度计,二手博勒飞粘度计维修|收购-天津市祥睿科技有限公司 | 智能楼宇-楼宇自控系统-楼宇智能化-楼宇自动化-三水智能化 | IIS7站长之家-站长工具-爱网站请使用IIS7站长综合查询工具,中国站长【WWW.IIS7.COM】 | 青岛代理记账_青岛李沧代理记账公司_青岛崂山代理记账一个月多少钱_青岛德辉财税事务所官网 | 电子天平-华志电子天平厂家| 诗词大全-古诗名句 - 古诗词赏析| 岩石钻裂机-液压凿岩机-劈裂机-挖改钻_湖南烈岩科技有限公司 | 板材品牌-中国胶合板行业十大品牌-环保板材-上海声达板材 | 广东佛电电器有限公司|防雷开关|故障电弧断路器|智能量测断路器 广东西屋电气有限公司-广东西屋电气有限公司 | 次氯酸钠厂家,涉水级次氯酸钠,三氯化铁生产厂家-淄博吉灿化工 | 电子万能试验机_液压拉力试验机_冲击疲劳试验机_材料试验机厂家-济南众标仪器设备有限公司 | led全彩屏-室内|学校|展厅|p3|户外|会议室|圆柱|p2.5LED显示屏-LED显示屏价格-LED互动地砖屏_蕙宇屏科技 | 小型铜米机-干式铜米机-杂线全自动铜米机-河南鑫世昌机械制造有限公司 | 高空重型升降平台_高空液压举升平台_高空作业平台_移动式升降机-河南华鹰机械设备有限公司 | 生产自动包装秤_颗粒包装秤_肥料包装秤等包装机械-郑州鑫晟重工科技有限公司 | 信阳市建筑勘察设计研究院有限公司| 污水处理设备维修_污水处理工程改造_机械格栅_过滤设备_气浮设备_刮吸泥机_污泥浓缩罐_污水处理设备_污水处理工程-北京龙泉新禹科技有限公司 | 卫生人才网-中国专业的医疗卫生医学人才网招聘网站! | 精密交叉滚子轴承厂家,转盘轴承,YRT转台轴承-洛阳千协轴承 | 德州万泰装饰 - 万泰装饰装修设计软装家居馆 | 博医通医疗器械互联网供应链服务平台_博医通 | 塑料托盘厂家直销-吹塑托盘生产厂家-力库塑业【官网】 | 锡膏喷印机-全自动涂覆机厂家-全自动点胶机-视觉点胶机-深圳市博明智控科技有限公司 | 电池高低温试验箱-气态冲击箱-双层电池防爆箱|简户百科 | 上海心叶港澳台联考一对一培训_上海心叶港澳台联考,港澳台联考一对一升学指导 | 水压力传感器_数字压力传感器|佛山一众传感仪器有限公司|首页 | 上海公众号开发-公众号代运营公司-做公众号的公司企业服务商-咏熠软件 | 小型UV打印机-UV平板打印机-大型uv打印机-UV打印机源头厂家 |松普集团 | PE拉伸缠绕膜,拉伸缠绕膜厂家,纳米缠绕膜-山东凯祥包装 | 汽车整车综合环境舱_军标砂尘_盐雾试验室试验箱-无锡苏南试验设备有限公司 | 压砖机_电动螺旋压力机_粉末成型压力机_郑州华隆机械tel_0371-60121717 | AR开发公司_AR增强现实_AR工业_AR巡检|上海集英科技 | 在线浊度仪_悬浮物污泥浓度计_超声波泥位计_污泥界面仪_泥水界面仪-无锡蓝拓仪表科技有限公司 | 电动球阀_不锈钢电动球阀_电动三通球阀_电动调节球阀_上海湖泉阀门有限公司 |