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

背景

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

具体操作

1. 创建蒙版组件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>

2. 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打开截取的图片
  
• 点击右侧面板中的曲线
  
• 预设选增强对比度
  
• 将曲线拉到合适位置，即可看到隐藏的水印