vue3使用watermark-js-plus

Vue3中使用Watermark.js Plus是一个过程，它可以帮助你在网页上添加图片水印功能。首先，你需要在项目中安装Watermark.js Plus库，可以使用npm或yarn来进行安装：

npm install watermark-js-plus
# 或者
yarn add watermark-js-plus

然后，在你的Vue组件中导入并初始化Watermark.js Plus，并设置相应的配置。下面是一个简单的示例：

<template>
  <div ref="canvasContainer" />
</template>

<script>
import Watermark from 'watermark-js-plus';

export default {
  setup() {
    const canvas = document.querySelector('.canvasContainer');
    let watermark;

    // 初始化水印
    async function initWatermark() {
      watermark = new Watermark(canvas, {
        text: '这是水印文本', // 水印内容
        position: 'bottom-right', // 水印位置
        color: '#aaa', // 颜色
        size: '10px', // 尺寸
      });
    }

    initWatermark();

    return { canvas };
  },
}
</script>

在这个例子中，`ref="canvasContainer"`用于获取DOM元素作为水印的画布。当组件挂载后，会自动创建并应用水印。