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

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

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

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

添加事件禁止選擇、拖拽、右鍵(簡(jiǎn)單的禁止用戶保存圖片,但無(wú)法阻止用戶打開控制臺(tái)查看,或是直接抓包)將之轉(zhuǎn)換為 canvas(讓瀏覽器認(rèn)為不是圖片以此禁止用戶對(duì)之進(jìn)行圖片的操作,但無(wú)法阻止抓包)禁止用戶使用控制臺(tái)查看源碼(阻止瀏覽器打開控制臺(tái),但無(wú)法阻止抓包)傳輸圖片使用自定義格式(可以阻止抓包,但需要后臺(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)事件,過(guò)于強(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è)簡(jiǎn)單的實(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}/** * 測(cè)試函數(shù)的執(zhí)行時(shí)間 * 注:如果函數(shù)返回 Promise,則該函數(shù)也會(huì)返回 Promise,否則直接返回執(zhí)行時(shí)間 * @param fn 需要測(cè)試的函數(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)為重載頁(yè)面 * @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)文章:
主站蜘蛛池模板: 珠海冷却塔降噪维修_冷却塔改造报价_凉水塔风机维修厂家- 广东康明节能空调有限公司 | 煤矿人员精确定位系统_矿用无线通信系统_煤矿广播系统 | 南京办公用品网-办公文具用品批发-打印机耗材采购 | 河南不锈钢水箱_地埋水箱_镀锌板水箱_消防水箱厂家-河南联固供水设备有限公司 | 双相钢_双相不锈钢_双相钢圆钢棒_双相不锈钢报价「海新双相钢」 双能x射线骨密度检测仪_dxa骨密度仪_双能x线骨密度仪_品牌厂家【品源医疗】 | 板框压滤机-隔膜压滤机配件生产厂家-陕西华星佳洋装备制造有限公司 | 校园文化空间设计-数字化|中医文化空间设计-党建|法治廉政主题文化空间施工-山东锐尚文化传播公司 | 金属切削液-脱水防锈油-电火花机油-抗磨液压油-深圳市雨辰宏业科技发展有限公司 | 东莞工厂厂房装修_无尘车间施工_钢结构工程安装-广东集景建筑装饰设计工程有限公司 | 模温机-油温机-电加热导热油炉-工业冷水机「欧诺智能」 | 协议书_协议合同格式模板范本大全 | 深圳富泰鑫五金_五金冲压件加工_五金配件加工_精密零件加工厂 | 361°官方网站 | 超高频感应加热设备_高频感应电源厂家_CCD视觉检测设备_振动盘视觉检测设备_深圳雨滴科技-深圳市雨滴科技有限公司 | 球磨机,节能球磨机价格,水泥球磨机厂家,粉煤灰球磨机-吉宏机械制造有限公司 | 东莞压铸厂_精密压铸_锌合金压铸_铝合金压铸_压铸件加工_东莞祥宇金属制品 | 生物除臭剂-除味剂-植物-污水除臭剂厂家-携葵环保有限公司 | 济南品牌包装设计公司_济南VI标志设计公司_山东锐尚文化传播 | 慢回弹测试仪-落球回弹测试仪-北京冠测精电仪器设备有限公司 | 一体式钢筋扫描仪-楼板测厚仪-裂缝检测仪-泰仕特(北京) | 工控机-图像采集卡-PoE网卡-人工智能-工业主板-深圳朗锐智科 | 净化工程_无尘车间_无尘车间装修-广州科凌净化工程有限公司 | 吲哚菁绿衍生物-酶底物法大肠菌群检测试剂-北京和信同通科技发展有限公司 | 抓斗式清污机|螺杆式|卷扬式启闭机|底轴驱动钢坝|污水处理闸门-方源水利机械 | ASA膜,ASA共挤料,篷布色母料-青岛未来化学有限公司 | 模型公司_模型制作_沙盘模型报价-中国模型网 | 不锈钢拉手厂家|浴室门拉手厂家|江门市蓬江区金志翔五金制品有限公司 | 电动垃圾车,垃圾清运车-江苏速利达机车有限公司 | 热风机_工业热风机生产厂家上海冠顶公司提供专业热风机图片价格实惠 | loft装修,上海嘉定酒店式公寓装修公司—曼城装饰 | 六维力传感器_六分量力传感器_模腔压力传感器-南京数智微传感科技有限公司 | 医学模型生产厂家-显微手术模拟训练器-仿真手术模拟训练系统-北京医教科技 | 食品机械专用传感器-落料放大器-低价接近开关-菲德自控技术(天津)有限公司 | 网带通过式抛丸机,,网带式打砂机,吊钩式,抛丸机,中山抛丸机生产厂家,江门抛丸机,佛山吊钩式,东莞抛丸机,中山市泰达自动化设备有限公司 | 自动气象站_农业气象站_超声波气象站_防爆气象站-山东万象环境科技有限公司 | 钢格栅板_钢格板网_格栅板-做专业的热镀锌钢格栅板厂家-安平县迎瑞丝网制造有限公司 | 船用烟火信号弹-CCS防汛救生圈-船用救生抛绳器(海威救生设备) | 铝箔袋,铝箔袋厂家,东莞铝箔袋,防静电铝箔袋,防静电屏蔽袋,防静电真空袋,真空袋-东莞铭晋让您的产品与众不同 | 无锡装修装潢公司,口碑好的装饰装修公司-无锡索美装饰设计工程有限公司 | 北京网站建设|北京网站开发|北京网站设计|高端做网站公司 | 烟雾净化器-滤筒除尘器-防爆除尘器-除尘器厂家-东莞执信环保科技有限公司 |