效果图

image.png
image.png

在vue项目中通过自定义指令，使用canvas特性生成base64格式的图片文件，创建div并将其设置为背景图片，再定位到想要添加水印的地方(或者直接设置背景图片)，从而实现页面或组件局部水印效果。

1.创建warterMark.js

  1. /*
  2.  * @description:
  3.  * @author: 王浩
  4.  * @Date: 2022-09-19 10:44:09
  5.  * @Modified By:
  6.  * @version: 1.0.0
  7.  */
  8. import Vue from "vue";
  10. Vue.directive("watermark", {
  11.   bind: function (el, binding) {
  12.     function addWaterMarker(parentNode, str, width, height, font, textColor, isShow = true, fillTextX = "10") {
  13.       console.log("水印文字", str, isShow);
  14.       // 检查父元素是否包含子元素
  15.       const elementContains = (parent, child) => parent !== child && parent.contains(child);
  16.       const flag = elementContains(parentNode, document.querySelector("canvas"));
  17.       // 防止重复创建
  18.       if (!flag) {
  19.         let can = document.createElement("canvas");
  20.         parentNode.appendChild(can);
  21.         can.width = width || 200;
  22.         can.height = height || 140;
  23.         can.style.display = "none";
  24.         console.log(can.style.display);
  25.         let cans = can.getContext("2d");
  26.         cans.rotate((-20 * Math.PI) / 180);
  27.         cans.font = font || "13px Microsoft Yahei";
  28.         cans.fillStyle = textColor || "#DDDDDD";
  29.         cans.textAlign = "left";
  30.         cans.textBaseline = "Middle";
  31.         cans.fillText(str, fillTextX, can.height);
  32.         // 设置背景图（整个项目中都添加水印建议使用此方法）
  33.         // parentNode.style.backgroundImage = "url(" + can.toDataURL("image/png") + ")";
  35.         // 创建div 定位覆盖（某个元素，如图片添加水印建议使用此方法）
  36.         let div = document.createElement("div");
  37.         // 判断是否显示水印
  38.         if (!isShow) {
  39.           div.style.display = "none";
  40.         }
  41.         div.id = str;
  42.         div.style.pointerEvents = "none";
  43.         div.style.top = "0";
  44.         div.style.left = "0";
  45.         div.style.position = "absolute";
  46.         div.style.zIndex = "100000";
  47.         div.style.width = "100%";
  48.         div.style.height = "100%";
  49.         div.style.background = "url(" + can.toDataURL("image/png") + ")";
  50.         parentNode.appendChild(div);
  51.       }
  52.     }
  53.     if (binding.value.text) {
  54.       addWaterMarker(
  55.         el, // 父元素
  56.         binding.value.text, //水印文字
  57.         binding.value.width, //画布宽度
  58.         binding.value.height, //画布高度
  59.         binding.value.font, //字体
  60.         binding.value.textColor, //文字颜色
  61.         binding.value.isShow, //是否显示水印
  62.         binding.value.fillTextX, //画布横坐标
  63.       );
  64.     }
  65.   },
  66. });

2. 引入main.js当中

我的warterMark.js文件在directive目录下
image.png

  1. import  '@/directive/warterMark.js'

3.调用指令

image.png
如果希望在整个项目中都添加水印，可以在app.vue中使用指令

  1. <template>
  2.   <div id="app">
  3.     <router-view v-watermark="{text: '水印名称', textColor: 'rgba(180, 180, 180, 0.3)'}" />
  4.   </div>
  5. </template>

如果希望给图片添加水印
image.png

  1. <template>
  2.   <div v-watermark="{text: '水印名称', textColor: 'rgba(180, 180, 180, 0.3)'}" >
  3.     <img src="" alt="" >
  4.   </div>
  5. </template>