Vue+canvas实现水印功能

<template>
  <div :class="['vite-app']">
    <watermark
      content="大家辛苦一下"
      :line-height="40"
      :rotate="-15"
      :fullscreen="true"
    >
      this is default text
      <ul>
        <li v-for="item in 5" :key="item">this is test content</li>
      </ul>
    </watermark>
     <div class="main-content">
      <ul>
        <li v-for="item in 60" :key="item">this is test content</li>
      </ul>
    </div>
  </div>
</template>
<script setup lang="ts">
import Watermark from "./components/Watermark.vue";
</script>
<style lang="less">
* {
  margin: 0;
  padding: 0;
}
.vite-app {
  font-weight: bold;
  font-size: 20px;
}
</style>

<template>
  <div
    :class="['water-mark', props.fullscreen ? 'water-mark-full-screen' : '']"
    ref="waterMarkContainer"
  >
    <slot></slot>
  </div>
</template>
<script setup lang="ts">
import { onMounted, ref } from "vue";
const waterMarkContainer = ref<HTMLElement>();
//poprs属性
export interface WarkMark {
  fullscreen?: boolean;
  fontSize?: number;
  lineHeight?: number;
  fontFamily?: string;
  color?: string;
  width?: number;
  height?: number;
  xOffset?: number;
  yOffset?: number;
  rotate?: number;
  imgSrc?: string;
  content: string;
}
//默认值
const props = withDefaults(defineProps<WarkMark>(), {
  fontSize: 16,
  fontFamily: "宋体",
  color: "rgba(128, 128, 128, .5)",
  width: 250,
  height: 258,
  // height: 100,
  lineHeight: 16,
  xOffset: 10,
  yOffset: 28,
  rotate: 30,
});
function createWaterMark() {
  const canvas = document.createElement("canvas");
  canvas.height = props.height;
  canvas.width = props.width;
  const ctx = canvas.getContext("2d");
  let imageUrl = "";
  ctx!.rotate(props.rotate * (Math.PI / 180));
  ctx!.fillStyle = props.color;
  ctx!.font = `${props.fontSize}px ${props.fontFamily}`;
  const wrap = document.createElement("div");
  wrap.classList.add("mak-wrap");
  wrap.style.zIndex = "-1";
  if (props.imgSrc) {
  //图片作为背景
    createImageWaterMark();
  } else {
  //文字作为背景
    createTextWaterMark();
  }
  function createDom() {
    wrap.style.backgroundImage =
      "url(" + imageUrl + ")," + "url(" + imageUrl + ")";
    wrap.style.backgroundPosition = `${props.width / 2}px ${
      props.height / 2
    }px, 0 0`;
    wrap.style.backgroundSize = props.width + "px";
    waterMarkContainer.value!.appendChild(wrap);
  }
  function createImageWaterMark() {
    const image = new Image();
    image.src = props.imgSrc!;
    image.width = props.width * 0.2;
    image.crossOrigin = "anonymous"; //允许图片跨域访问
    image.onload = () => {
      ctx!.drawImage(
        image,
        props.xOffset,
        props.xOffset + props.lineHeight + 10
      );
      imageUrl = canvas.toDataURL();
      canvas.style.opacity = ".5";
      createDom();
    };
  }
  function createTextWaterMark() {
    ctx!.fillText(
      props.content,
      props.xOffset,
      props.xOffset + props.lineHeight + 10
    );
    imageUrl = canvas.toDataURL();
    createDom();
  }
}
onMounted(() => {
  createWaterMark();
});
</script>
<style lang="less">
.water-mark {
  position: relative;
  pointer-events: none;
  .mak-wrap {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
}
.water-mark.water-mark-full-screen {
  .mak-wrap {
    position: fixed;
  }
}
</style>