说明

设置防篡改水印

参数 

      type waterMarkOptions = {
    // 自定义水印的文字大小
    fontSize?: number;
    // 自定义水印的文字颜色
    fontColor?: string;
    // 自定义水印的文字字体
    fontFamily?: string;
    // 自定义水印的文字对齐方式
    textAlign?: CanvasTextAlign;
    // 自定义水印的文字基线
    textBaseline?: CanvasTextBaseline;
    // 自定义水印的文字倾斜角度
    rotate?: number;
};

使用

  • 默认添加到document.body，如果添加到其他元素要保证添加水印的元素（此例中为 #app）的 position 属性设为 relative 或者 absolute，这样水印才能正确定位。

  • 可按需调整 waterMarkOptions 对象里的配置选项，例如 fontSize、fontColor、rotate 等。

      <template>
  <div id="app">
    <h1>水印示例</h1>
    <button @click="addWatermark">添加水印</button>
    <button @click="removeWatermark">移除水印</button>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { useWatermark } from 'liyao-vue-common'; 

const appRef = ref<HTMLElement | null>(null);

const { setWatermark, clear } = useWatermark(appRef, {
  // waterMarkOptions...
  fontSize: 16,
  fontColor: 'rgba(0, 0, 0, 0.2)',
  rotate: 30
});

const addWatermark = () => {
  setWatermark('自定义水印文本');
};

const removeWatermark = () => {
  clear();
};
</script>

<style scoped>
#app {
  position: relative;
  padding: 20px;
}
</style>

声明

作者： liyao

版权：本博客所有文章除特别声明外，均采用CCBY-NC-SA4.O许可协议。转载请注明!

链接： https://xiaoying.org.cn/pages/7ad229/

最后更新于 2026-02-17 19:41 history