添加水印

使用watermark-js-plus 插件

局部水印要添加 style="position: relative" 局部水印要在 onMounted 执行

整个水印

参考下面局部水印，同时不要写 parent: ".shuiyin" 即可

局部水印

<template>
  <div class="shuiyin" style="position: relative">
    <div class="box" v-for="item in 10" :key="item">
      {{ item }}
    </div>
  </div>
</template>
<script setup>
import { Watermark } from "watermark-js-plus"; // 引入水印插件
import useUserStore from "@/store/modules/user";
const userStore = useUserStore();
onMounted(() => {
  const watermark = new Watermark({
    parent: ".shuiyin",
    width: 170,
    height: 180,
    rotate: 45,
    contentType: "multi-line-text",
    content:
      userStore.nickName + "-" + userStore.id + "\n" + new Date().getTime(),
    // wangxians\n20200102",
    globalAlpha: 0.3,
    mode: "default",
    textType: "stroke",
    lineHeight: 26,
    fontSize: "12px",
    fontFamily: "sans-serif",
    fontStyle: "",
    fontVariant: "",
    fontColor: "#ccc",
    fontWeight: "100",
    textAlign: "center",
    textBaseline: "top",
    filter: "none",
    letterSpacing: "0px",
    mutationObserve: true,
    monitorProtection: true,
    auxiliaryLine: false,
    movable: false,
  });

  watermark.create(); // 添加水印

  // watermark.destroy(); // 删除水印
  //
});
</script>

<style lang="scss" scoped>
.shuiyin {
  width: 400px;
  height: 400px;
  border: 1px solid red;
}
</style>

暗水印

<template>
  <div class="shuiyin" style="position: relative">
    <div class="box" v-for="item in 10" :key="item">
      {{ item }}
    </div>
  </div>
</template>
<script setup>
import { BlindWatermark } from "watermark-js-plus"; // 引入水印插件
import useUserStore from "@/store/modules/user";
const userStore = useUserStore();
onMounted(() => {
  const watermark = new BlindWatermark({
    content: "hello my watermark",
    width: 200,
    height: 200,
    onSuccess: () => {
      // success callback
    },
  });

  watermark.create(); // 添加水印
});
</script>

<style lang="scss" scoped>
.shuiyin {
  width: 400px;
  height: 400px;
  border: 1px solid red;
}
</style>

评论