几行代码搞定vue项目中的水印功能

给项目加水印是一个极其普遍的需求，下面就分2种方法用几行代码搞定！

方法一：非canvas实现

公共的js
可以在那个页面中用就在那个页面中引入

/**
     * @description: createWaterMark.js 加水印功能
     */
    let waterMarkDOM;

    let clearWaterMark = () => {
        if (waterMarkDOM) waterMarkDOM.remove();
    };
    /**
     * @description: 创建水印
     * @param {String} contentText 水印内容
     */
    export default function createWaterMark(waterMarkName) {
    clearWaterMark();
    if (!waterMarkName) {
        return;
    }
    let width = window.parseInt(document.body.clientWidth);
    let canvasWidth = width / window.parseInt(width / 320);
    let fontFamily = window.getComputedStyle(document.body)['font-family'];
    const fragment = document.createDocumentFragment();
    waterMarkDOM = document.createElement('div');
    waterMarkDOM.className = 'water-mark-wrap';
    let spanStr = '';
    for (let i = 0; i < 100; i++) {
        spanStr += `<span class="water-word" style=width:${canvasWidth}px;height:200px;font: ${fontFamily}>${waterMarkName}</span>`;
    }
    waterMarkDOM.innerHTML = spanStr;
    fragment.appendChild(waterMarkDOM);
    document.body.appendChild(fragment);
}

在App.vue文件中加上相关样式并且调用就大功告成啦,或者那个页面中引入

import WaterMark from '文件路径/waterMark.js';
    .....
    mounted() {
        WaterMark('这是水印');
    }
    <style>
    .water-mark-wrap {
        position: absolute;
        width: 100%;
        height: 100%;
        z-index: 9999;
        pointer-events: none;
        top: 0;
        left: 0;
        display: flex;
        overflow: hidden;
        flex-wrap: wrap;
    }
    .water-word {
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 18px;
        color: rgba(8, 8, 8, 0.1);
        transform: rotate(-45deg);
        user-select: none;
    }
    </style>

方法二：使用canvas

let style;
let clearWaterMark = () => {
    if (style) style.remove();
};
export default function createWaterMark(userName) {
    clearWaterMark();
    if (!userName) {
        return;
    }
    let width = window.parseInt(document.body.clientWidth);
    let canvasWidth = width / window.parseInt(width / 320);
    let fontFamily = window.getComputedStyle(document.body)["font-family"];
    let canvas = document.createElement("canvas");
    canvas.width = canvasWidth;
    canvas.height = 200;
    let ctx = canvas.getContext("2d");
    ctx.rotate((-20 * Math.PI) / 180);
    ctx.font = `18px ${fontFamily}`;
    ctx.fillStyle = "rgba(8,8,8,.1)";
    ctx.fillText(userName, 50, 200);
    let imgSrc = canvas.toDataURL("image/png");
    style = document.createElement("style");
    style.innerHTML = `.with-watermark:before{
        content: "";
        width: 100%;
        height: 100%;
        display: block;
        position: absolute;
        z-index: -1;
        background-image: url("${imgSrc}");
    }`;
    (document.head.append || document.head.appendChild).apply(document.head, [style]);
}

调用，在App.vue中，引入文件，并加上类名: with-watermark，然后调用方法传入水印显示的内容即可

<template>
    <div id="app" class="with-watermark"></div>
</template>

import WaterMark from '文件路径/waterMark.js';

mounted() {
   waterMark("这是水印");
}