前端截图身份溯源

本文探讨前端暗水印技术,用于保护敏感信息。通过介绍暗水印和明水印的区别,展示了暗水印如何在不影响用户体验的情况下,实现在截图中隐藏身份信息。文中提供了一个简单的暗水印实现示例,并警告读者不要随意截图敏感内容,因为可能存在的暗水印可以追溯身份。
摘要由CSDN通过智能技术生成

背景

大家好,我是Peter

今天在跟同事朋友聊这个脉脉上的一些事,我就突然想到之前很多人喜欢截图各种APP页面发一些比较敏感的内容出来,于是就写了这篇文章

开头

从今年看到这个新闻开始,我就开始警觉了。

b61a945d89bc989ae991c5dfd94ae27b.png

先回到技术

前端有一种东西叫水印,特别当你浏览一些内部系统的时候,大部分都会有,例如现在的企业微信,担心你截图发出去内部的重要信息。

小伙伴们会发现,水印大部分都是我们使用者可以看见的,例如企业微信的,这种我们叫明水印

可是还有一种,叫暗水印

什么叫暗水印?

就是你肉眼一眼看不到的水印,不影响你的浏览页面内容,无感知的把水印加进去。

这样一些敏感的内容,一旦泄露出去,就能通过网上的图片,解码找出来是谁的身份泄漏出去,而且往往一般的泄漏者不知道原来会有这个东西

所以有人会出现,截个图发给朋友,然后网上疯传,最后被定位到是他发的图片。这就是暗水印的一种使用

所以大家不要乱截图APP和各种页面,特别是比较敏感的内容

最简单的明水印实现

使用canvas生成,然后使用backgroud-repea至需要展示水印的区域~

function __canvasWM({
    container = document.body,
    width = '250px',
    height = '200px',
    textAlign = 'center',
    textBaseline = 'middle',
    font = '15px microsoft yahei',
    fillStyle = 'rgba(184, 184, 184, 0.8)',
    content = '请勿外传',
    rotate = '30',
}) {
    const canvas = document.createElement('canvas');

    canvas.setAttribute('width', width);
    canvas.setAttribute('height', height);
    const ctx = canvas.getContext('2d');
    ctx.textAlign = textAlign;
    ctx.textBaseline = textBaseline;
    ctx.font = font;
    ctx.fillStyle = fillStyle;
    ctx.rotate((Math.PI / 180) * rotate);
    ctx.fillText(content, parseFloat(width) / 2, parseFloat(height) / 2);
    const base =
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值