vue 项目中添加水印效果

今天药忘吃喽~ 2022-11-02 11:47 558阅读 0赞

在项目中有给部分区域或者是整个页面添加水印的需求。加水印其实很简单，它的原理是使用 canvas 生成图片在使用 toDataURL 转化为 base64 格式，然后将转换后的图片设置为背景图，从而实现水印的效果。

下面是结合我在项目里的需求实现水印的方法：

##### 一、自定义指令： #####

1、在 directives 文件夹下面 创建一个 watermark.js 文件

import Vue from 'vue';
    export default () => { 
    	Vue.directive('watermark', (el, binding) => { 
    	    function addWaterMarker(str1, str2, parentNode, font, textColor) {  // str1、str2水印文字，父元素，字体，文字颜色
    	    	var img = document.createElement('canvas'); // 创建canvas元素
    			parentNode.appendChild(img);
    			img.width = 240;
    			img.height = 150;
    			img.style.display = 'none';
    			var imgs = img.getContext('2d'); // 获取canvas画布
    			imgs.rotate(-20 * Math.PI / 180); // 逆时针旋转π/9
    			imgs.font = font || '16px Microsoft JhengHei';
    			imgs.fillStyle = textColor || 'rgba(200, 200, 200, 0.3)';
    			imgs.textAlign = 'left';
    			imgs.textBaseline = 'Middle';
    			imgs.fillText(str1, 15, 80); // 第一行字体
    			imgs.fillText(str2, 15, 100); // 第二行字体
    			parentNode.style.backgroundImage = 'url(' + img.toDataURL('image/png') + ')';
    	    }
    	    addWaterMarker(binding.value.text1, binding.value.text2, el, binding.value.font, binding.value.textColor);
    	})
    }

2、在 main.js 引入

import watermark from './directive/mark.js';
    Vue.use(watermark);

3、在需要加水印的模块添加

<template>
    	<div v-watermark="{text1:'你好',text2:'水印',textColor:'red'}">这里是容器！</div>
    </template>

效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5OTE4MA_size_16_color_FFFFFF_t_70]

##### 二、自定义插件 #####

const watermark = { }
    const setWatermark = (str, container) => { //水印内容、容器
      const id = '1.23452384164.123412415'
      //没有容器直接return，这里使用的时候str、container都是必填
      if (container === undefined) { 
        return
      }
      // 查看页面上有没有当前id元素，如果有则删除
      if (document.getElementById(id) !== null) { 
      	const childelement = document.getElementById(id)
        childelement.parentNode.removeChild(childelement)
      }
     
      var containerWidth = container.offsetWidth // 获取父容器宽
      var containerHeight = container.offsetHeight // 获取父容器高
      container.style.position = 'relative' // 设置布局为相对布局
     
      // 创建canvas元素(先制作一块背景图)
      const img= document.createElement('canvas')
      img.width = 390 // 设置每一块的宽度
      img.height = 200 // 高度
      const imgs= img.getContext('2d') // 获取canvas画布
      imgs.rotate(-20 * Math.PI / 180) // 逆时针旋转π/9
      imgs.font = '20px Vedana' // 设置字体
      imgs.fillStyle = 'rgba(200, 200, 200, 0.20)' // 设置字体的颜色
      imgs.textAlign = 'left' // 文本对齐方式
      imgs.textBaseline = 'Middle' // 文本基线
      imgs.fillText(str, 0, 4 * img.height / 5) // 绘制文字
     
      // 创建一个div元素
      const div = document.createElement('div')
      div.id = id // 设置id
      div.style.pointerEvents = 'none' // 取消所有事件
      div.style.top = '0px'
      div.style.left = '0px'
      div.style.position = 'absolute'
      div.style.zIndex = '100000'
      div.style.width = containerWidth + 'px'
      div.style.height = containerHeight + 'px'
      div.style.background = 'url(' + img.toDataURL('image/png') + ') left top repeat'
      container.appendChild(div) // 追加到页面
     
      return id
    }
     
    // 该方法只允许调用一次
    watermark.set = (str, container) => { 
      let id = setWatermark(str, container)
      setInterval(() => { 
        if (document.getElementById(id) === null) { 
          id = setWatermark(str, container)
        }
      }, 500)
      // 监听页面大小的变化
      window.onresize = () => { 
        setWatermark(str, container)
      }
    }
     
    export default watermark

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzI5OTE4MA_size_16_color_FFFFFF_t_70]: /images/20221024/fb59c2d05a9e464d9b3d196d66d55424.png