JavaScript 禁止用户保存图片的实现代码
程序员文章站
2022-04-25 17:37:45
添加事件禁止选择、拖拽、右键(简单的禁止用户保存图片,但无法阻止用户打开控制台查看,或是直接抓包)将之转换为 canvas(让浏览器认为不是图片以此禁止用户对之进行图片的操作,但无法阻止抓包)禁止用户...
添加事件禁止选择、拖拽、右键(简单的禁止用户保存图片,但无法阻止用户打开控制台查看,或是直接抓包)
将之转换为 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} />
参考:
将之转换为 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 禁止用户保存图片的文章就介绍到这了,更多相关js 禁止保存图片内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!
上一篇: MySql减少内存占用的方法详解
下一篇: 详解Linux进程间通信——使用共享内存
推荐阅读
-
Javascript实现滚动图片新闻的实例代码_javascript技巧
-
php中使用cookie来保存用户登录信息的实现代码_PHP教程
-
php将远程图片保存到本地服务器的实现代码
-
php将远程图片保存到本地服务器的实现代码_PHP
-
php同时使用session和cookie来保存用户登录信息的实现代码,sessioncookie_PHP教程
-
js 图片随机不定向浮动的实现代码_javascript技巧
-
php同时使用session和cookie来保存用户登录信息的实现代码
-
javascript实现图片切换的幻灯片效果源代码
-
Javascript实现图片不间断滚动的代码
-
javascript实现图片切换的幻灯片效果源代码