背景
最近公司有这样一个需求，H5在用户截图的时候是否能在截取的图片上携带用户信息和公司信息，以实现产品产权的追踪和定位。且需要用户在操作页面的时候，以及截图完成后，都是无感知的。
目前想到一个思路，仅供参考：即在页面最顶部加上透明蒙层，蒙层携带文字信息，文字颜色也为透明，截图后文字信息肉眼不可见，通过ps等图片处理工具处理截图，才会将文字信息展示出来
具体操作
创建蒙版组件WaterMask
<template><divclass="waterMask"><divclass="item"><span>公司信息</span><span>用户信息</span></div></div></template><script>exportdefault { name: 'WaterMask', data() { return { }; }, }; </script><stylelang="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><divid="app"><keep-alive><router-view></router-view></keep-alive><WaterMask/></div></template><script>importWaterMaskfrom'./components/common/WaterMask'; exportdefault { name: 'App', components: { WaterMask, }, data() { return { }; }, }; </script><stylelang="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打开截取的图片
预设选增强对比度
将曲线拉到合适位置，即可看到隐藏的水印
