H5实现隐形水印的一些思路

背景
具体操作
如何通过PS让隐形水印展现出来
- 针对背景较亮的情况
- 针对背景较暗的情况

背景

最近公司有这样一个需求，H5在用户截图的时候是否能在截取的图片上携带用户信息和公司信息，以实现产品产权的追踪和定位。且需要用户在操作页面的时候，以及截图完成后，都是无感知的。
目前想到一个思路，仅供参考：即在页面最顶部加上透明蒙层，蒙层携带文字信息，文字颜色也为透明，截图后文字信息肉眼不可见，通过ps等图片处理工具处理截图，才会将文字信息展示出来

具体操作

创建蒙版组件WaterMask

<template><div class="waterMask"><div class="item"><span>公司信息</span><span>用户信息</span></div></div>
</template><script>export default {name: 'WaterMask',data() {return {};},
};
</script><style lang="less" scoped>
@import "../../assets/less/base.less";
.waterMask {position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 999999999999; // 将组件层级提到最高，以覆盖在所有页面之上pointer-events: none; // 让该组件鼠标事件失效，不影响用户操作其层级之下的页面display: flex;flex-wrap: wrap;justify-content: center;background: transparent; // 背景色透明.item {font-size: 20px;padding: 10px;color: rgba(0,0,0,0.005); // 文字不透明度降至最低，肉眼不可见，通过图片处理工具如ps处理后才可见}
}
</style>

App.vue中挂载

<template><div id="app"><keep-alive><router-view></router-view></keep-alive><WaterMask /></div>
</template><script>
import WaterMask from './components/common/WaterMask';export default {name: 'App',components: {WaterMask,},data() {return {};},
};
</script><style lang="less">
</style>

如何通过PS让隐形水印展现出来

针对背景较亮的情况

水印蒙层字体颜色值设置rgba(0,0,0,0.005)

.waterMask {position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 999999999999;pointer-events: none;display: flex;flex-wrap: wrap;justify-content: center;background: transparent;.item {font-size: 20px;padding: 10px;color: rgba(0,0,0,0.005); // 水印蒙层字体颜色设置为白色透明}
}

PS打开截取的图片
点击右侧面板中的曲线
预设选增强对比度
将曲线拉到合适位置，即可看到隐藏的水印

针对背景较暗的情况

水印蒙层字体颜色值设置rgba(255,255,255,0.005)

.waterMask {position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: 999999999999;pointer-events: none;display: flex;flex-wrap: wrap;justify-content: center;background: transparent;.item {font-size: 20px;padding: 10px;color: rgba(255,255,255,0.005); // 水印蒙层字体颜色设置为黑色透明}
}

PS打开截取的图片
点击右侧面板中的曲线
预设选增强对比度
将曲线拉到合适位置，即可看到隐藏的水印

H5实现隐形水印的一些思路相关推荐

iOS 隐形水印之 LSB 实现
Python实战社群 Java实战社群长按识别下方二维码,按需求添加扫码关注添加客服进Python社群▲ 扫码关注添加客服进Java社群▲ 作者丨千帆直播-陈奇辉来源丨搜狐技术产品(sohu ...
水印，数字水印，频域水印(隐形水印)很麻烦！用这个分分钟搞定！
水印,你在很多公司图片都会看到,里面都会加入图片都会有显式水印,或者半隐形水印.平常加水印,只要将两张图片色值混合就没问题了 import cv2 import numpy as np import ...
（uniapp）h5图片加水印
写一个uniapp图片加水印,限于h5,当然小程序和App也是可以的,只是返回的不一样,这里是可以在H5用的,然后可以拿到加完水印的图片,废话不多说: 第一步拿到你要加水印的图片地址,先用canvas ...
h5聊天工具的开发过程及思路
这个产品的主要技术栈有,网易nim即时通信,vue-cli,muse-ui 1.在拿到这个需求时,脑袋里空的,什么想法都没有,完全懵逼,进了网易云通信的官网api查看,由于我做的是客户端的,所以重点看 ...
what???日本大蒜销量激增；剑桥大学『机器学习与贝叶斯推理』最新课程；黑客工具速查清单；图片隐形水印添加工具；前沿论文 | ShowMeAI资讯日报
隐形数字水印_Android 实现图片水印与隐形数字水印
在使用知乎,微博的时候,我们经常可以看到自己上传的图片被加上了文字水印,在实际的应用开发过程中,很多客户端都需要开发者自己编写 Canvs 绘制图形水印的方法,今天我想在这里介绍一个轻量级的开源 An ...
隐形数字水印_轻量级安卓水印框架，支持隐形数字水印 AndroidWM
AndroidWM 一个轻量级的 Android 图片水印框架,支持隐形水印和加密水印. English version 下载与安装 Gradle: implementation 'com.huang ...
用代码给自己的照片上个隐形的水印吧
一张看似普普通通的图片,可能会被收藏.可能会被用作头像,这是没有什么问题的.但是当被用于商业用途,那就要小心了,隐形水印,一种对图片看不见的保护.可能有人觉得匪夷所思,有人觉得害怕,但事实上这是好事, ...
【Web技术】前端水印实现方案
一.问题背景为了防止信息泄露或知识产权被侵犯,在web的世界里,对于页面和图片等增加水印处理是十分有必要的,水印的添加根据环境可以分为两大类,前端浏览器环境添加和后端服务环境添加,简单对比一下这两种 ...
用Python去除扫描型PDF中的水印
内容概述含水印扫描型PDF文件,其中某页如下图所示,用Python去除其页顶及页底的水印. 处理思路:PDF中的每一页的水印的相对位置基本相同,将PDF每一页输出成图片,然后进行图片编辑,用白色填充 ...

H5实现隐形水印的一些思路

H5实现隐形水印的一些思路

背景

具体操作

如何通过PS让隐形水印展现出来

针对背景较亮的情况

针对背景较暗的情况

H5实现隐形水印的一些思路相关推荐

最新文章

热门文章