vue2添加自定义水印，原生小程序添加水印

1.项目使用的是vue2和element框架，element框架没有提供自定义水印功能

2.实现功能：使用自定义指定全局实现了自定义水印，解决嵌套iframe双重水印问题

3.js代码实现，新建js文件，下面为完整代码

/*
 * @Author: renmingjie
 * @Date: 2024-09-05 14:09:45
 * @LastEditors: Do not edit
 * @LastEditTime: 2024-09-23 11:26:03
 * @Description: 
 * @FilePath: \yikatong-ui\src\utils\directive.js
 */
import Vue from 'vue'  

let watermarkDivCache = null;
let canvasCache = null;

Vue.directive('watermark', {
  // 绑定
  bind(el, binding) {
    el.style.position = 'relative';
    updateWatermark(el, binding.value || '');
  },
  // 更新
  update(el, binding) {
    updateWatermark(el, binding.value || '');
  }
});

// 更新水印的辅助函数
function updateWatermark(el, text) {
  const isInsideIframe = window !== window.parent;
  if (isInsideIframe) {
    return;
  }

  if (watermarkDivCache) {
    el.removeChild(watermarkDivCache);
  }

  const canvas = createWatermarkCanvas(text);
  canvasCache = canvas;

  watermarkDivCache = createWatermarkDiv(canvas);

  el.appendChild(watermarkDivCache);
}

// 创建水印 canvas
function createWatermarkCanvas(text) {
  const canvas = canvasCache || document.createElement('canvas');
  const ctx = canvas.getContext('2d');

  const canvasWidth = 300;
  const canvasHeight = 180;
  canvas.width = canvasWidth;
  canvas.height = canvasHeight;

  ctx.font = '14px Arial';
  ctx.fillStyle = 'rgba(180, 180, 180, 0.2)';
  ctx.textAlign = 'center';
  ctx.textBaseline = 'middle';

  const textWidth = ctx.measureText(text).width;
  const x = canvasWidth / 2;
  const y = canvasHeight / 2;

  ctx.clearRect(0, 0, canvasWidth, canvasHeight);
  ctx.save();
  ctx.translate(x, y);
  ctx.rotate(-Math.PI / 8);
  ctx.fillText(text, 0, 0);
  ctx.restore();

  return canvas;
}

// 创建水印 div
function createWatermarkDiv(canvas) {
  const div = watermarkDivCache || document.createElement('div');
  div.style.position = 'fixed';
  div.style.top = '0';
  div.style.left = '0';
  div.style.right = '0';
  div.style.bottom = '0';
  div.style.pointerEvents = 'none';
  div.style.background = `url('${canvas.toDataURL("image/png")}') left top repeat`;
  return div;
}

4.将上面js文件引入到main.js里

// 水印
import './utils/directive.js'

5.在想要使用的页面添加水印，我这边全局添加，所以在app.vue中使用v-watermark="text"，text为自定义水印，可以根据自身需要来添加，如果某个角色或者账号不想要添加水印可以将水印置为空即可

<template>
  <div id="app" v-watermark="text">
    <router-view />
    <theme-picker />
  </div>
</template>

原生小程序通过css来实现添加水印功能，不能全局添加，需要一个个页面添加，稍微麻烦点，代码如下userName，phoneNumber为水印内容，自行更换

<!-- 水印 -->
<view style="position: fixed;width: 100vw; height: 100vh; pointer-events: none;transform: rotate(-10deg);">
    <view style="display: flex; flex-wrap: wrap;">
        <block wx:for="{{50}}" wx:key="index">
            <view style="color:gray; margin:30rpx; padding:20rpx; opacity: 0.1;">
                {{userName}} {{phoneNumber}}
            </view>
            <view style="color:gray; margin:30rpx; padding:20rpx; opacity: 0.1;">

            </view>
        </block>
    </view>

</view>

内部项目就不放效果图了，如有不足，还请留言！！！