From b14e4e9e74215878af8d9de028e9936302d39c2a Mon Sep 17 00:00:00 2001
From: weixin_46115723 <weixin_46115723@devide>
Date: Fri, 19 Apr 2024 11:29:00 +0800
Subject: [PATCH] Fri Apr 19 11:29:00 CST 2024 inscode

---
 package.json                              |   1 +
 src/components/TheWelcome.vue             | 131 +++++++--------
 src/components/watermark/createCanvas.vue | 185 ++++++++++++++++++++++
 src/components/watermark/index.vue        | 183 +++++++++++++++++++++
 4 files changed, 438 insertions(+), 62 deletions(-)
 create mode 100644 src/components/watermark/createCanvas.vue
 create mode 100644 src/components/watermark/index.vue

diff --git a/package.json b/package.json
index 1935bf0..13d0d3a 100644
--- a/package.json
+++ b/package.json
@@ -9,6 +9,7 @@
   "dependencies": {
     "element-plus": "^2.5.6",
     "guess": "^1.0.2",
+    "mathjs": "^12.4.1",
     "pinia": "^2.1.7",
     "vue": "^3.2.37",
     "vue-router": "^4.3.0"
diff --git a/src/components/TheWelcome.vue b/src/components/TheWelcome.vue
index d3d2e7a..48be559 100644
--- a/src/components/TheWelcome.vue
+++ b/src/components/TheWelcome.vue
@@ -1,5 +1,6 @@
 <script setup>
 import WelcomeItem from './WelcomeItem.vue'
+import watermark from './watermark/index.vue'
 import DocumentationIcon from './icons/IconDocumentation.vue'
 import ToolingIcon from './icons/IconTooling.vue'
 import EcosystemIcon from './icons/IconEcosystem.vue'
@@ -8,77 +9,83 @@ import SupportIcon from './icons/IconSupport.vue'
 </script>
 
 <template>
-  <WelcomeItem>
-    <template #icon>
-      <DocumentationIcon />
-    </template>
-    <template #heading>Documentation</template>
+  <watermark>
+    <WelcomeItem>
+      <template #icon>
+        <DocumentationIcon />
+      </template>
+      <template #heading>Documentation</template>
 
-    Vue’s
-    <a target="_blank" href="https://vuejs.org/">official documentation</a>
-    provides you with all information you need to get started.
-  </WelcomeItem>
+      Vue’s
+      <a href="https://vuejs.org/" target="_blank" rel="noopener">official documentation</a>
+      provides you with all information you need to get started.
+    </WelcomeItem>
 
-  <WelcomeItem>
-    <template #icon>
-      <ToolingIcon />
-    </template>
-    <template #heading>Tooling</template>
+    <WelcomeItem>
+      <template #icon>
+        <ToolingIcon />
+      </template>
+      <template #heading>Tooling</template>
 
-    This project is served and bundled with
-    <a href="https://vitejs.dev/guide/features.html" target="_blank">Vite</a>. The recommended IDE
-    setup is <a href="https://code.visualstudio.com/" target="_blank">VSCode</a> +
-    <a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>. If you need to test
-    your components and web pages, check out
-    <a href="https://www.cypress.io/" target="_blank">Cypress</a> and
-    <a href="https://on.cypress.io/component" target="_blank"
-      >Cypress Component Testing</a
-    >.
+      This project is served and bundled with
+      <a href="https://vitejs.dev/guide/features.html" target="_blank" rel="noopener">Vite</a>. The
+      recommended IDE setup is
+      <a href="https://code.visualstudio.com/" target="_blank" rel="noopener">VSCode</a> +
+      <a href="https://github.com/johnsoncodehk/volar" target="_blank" rel="noopener">Volar</a>. If
+      you need to test your components and web pages, check out
+      <a href="https://www.cypress.io/" target="_blank" rel="noopener">Cypress</a> and
+      <a href="https://on.cypress.io/component" target="_blank" rel="noopener"
+        >Cypress Component Testing</a
+      >.
 
-    <br />
+      <br />
 
-    More instructions are available in <code>README.md</code>.
-  </WelcomeItem>
+      More instructions are available in <code>README.md</code>.
+    </WelcomeItem>
 
-  <WelcomeItem>
-    <template #icon>
-      <EcosystemIcon />
-    </template>
-    <template #heading>Ecosystem</template>
+    <WelcomeItem>
+      <template #icon>
+        <EcosystemIcon />
+      </template>
+      <template #heading>Ecosystem</template>
 
-    Get official tools and libraries for your project:
-    <a target="_blank" href="https://pinia.vuejs.org/">Pinia</a>,
-    <a target="_blank" href="https://router.vuejs.org/">Vue Router</a>,
-    <a target="_blank" href="https://test-utils.vuejs.org/">Vue Test Utils</a>, and
-    <a target="_blank" href="https://github.com/vuejs/devtools">Vue Dev Tools</a>. If you need more
-    resources, we suggest paying
-    <a target="_blank" href="https://github.com/vuejs/awesome-vue">Awesome Vue</a>
-    a visit.
-  </WelcomeItem>
+      Get official tools and libraries for your project:
+      <a href="https://pinia.vuejs.org/" target="_blank" rel="noopener">Pinia</a>,
+      <a href="https://router.vuejs.org/" target="_blank" rel="noopener">Vue Router</a>,
+      <a href="https://test-utils.vuejs.org/" target="_blank" rel="noopener">Vue Test Utils</a>, and
+      <a href="https://github.com/vuejs/devtools" target="_blank" rel="noopener">Vue Dev Tools</a>. If
+      you need more resources, we suggest paying
+      <a href="https://github.com/vuejs/awesome-vue" target="_blank" rel="noopener">Awesome Vue</a>
+      a visit.
+    </WelcomeItem>
 
-  <WelcomeItem>
-    <template #icon>
-      <CommunityIcon />
-    </template>
-    <template #heading>Community</template>
+    <WelcomeItem>
+      <template #icon>
+        <CommunityIcon />
+      </template>
+      <template #heading>Community</template>
 
-    Got stuck? Ask your question on
-    <a target="_blank" href="https://chat.vuejs.org">Vue Land</a>, our official Discord server, or
-    <a target="_blank" href="https://stackoverflow.com/questions/tagged/vue.js">StackOverflow</a>.
-    You should also subscribe to
-    <a target="_blank" href="https://news.vuejs.org">our mailing list</a> and follow the official
-    <a target="_blank" href="https://twitter.com/vuejs">@vuejs</a>
-    twitter account for latest news in the Vue world.
-  </WelcomeItem>
+      Got stuck? Ask your question on
+      <a href="https://chat.vuejs.org" target="_blank" rel="noopener">Vue Land</a>, our official
+      Discord server, or
+      <a href="https://stackoverflow.com/questions/tagged/vue.js" target="_blank" rel="noopener"
+        >StackOverflow</a
+      >. You should also subscribe to
+      <a href="https://news.vuejs.org" target="_blank" rel="noopener">our mailing list</a> and follow
+      the official
+      <a href="https://twitter.com/vuejs" target="_blank" rel="noopener">@vuejs</a>
+      twitter account for latest news in the Vue world.
+    </WelcomeItem>
 
-  <WelcomeItem>
-    <template #icon>
-      <SupportIcon />
-    </template>
-    <template #heading>Support Vue</template>
+    <WelcomeItem>
+      <template #icon>
+        <SupportIcon />
+      </template>
+      <template #heading>Support Vue</template>
 
-    As an independent project, Vue relies on community backing for its sustainability. You can help
-    us by
-    <a target="_blank" href="https://vuejs.org/sponsor/">becoming a sponsor</a>.
-  </WelcomeItem>
+      As an independent project, Vue relies on community backing for its sustainability. You can help
+      us by
+      <a href="https://vuejs.org/sponsor/" target="_blank" rel="noopener">becoming a sponsor</a>.
+    </WelcomeItem>
+  </watermark>
 </template>
diff --git a/src/components/watermark/createCanvas.vue b/src/components/watermark/createCanvas.vue
new file mode 100644
index 0000000..3dea970
--- /dev/null
+++ b/src/components/watermark/createCanvas.vue
@@ -0,0 +1,185 @@
+<script setup>
+  import * as math from 'mathjs';
+  // import menuEdit from '@adm/base/menu/edit.vue';
+  import { onMounted, reactive, ref, computed, watch, nextTick } from 'vue';
+  // import useModalMinix from '@/hook/modal.js';
+  // import { useUserStore } from "@/stores/user.js";
+  // import { getList } from "@/api/api.js";
+  // import { post } from '@/function/request/index.js'
+
+  defineOptions({name: ''});
+  // const {baseDataMap, formRef, form, saveForm, loading, submitLoading, closeModal} = useModalMinix();
+  // const { baseURL } = useUserStore();
+  const props = defineProps({})
+  const emits = defineEmits(['on-ok']);
+  // watch(() => foo, (newValue, oldValue) => {})
+  const watermark = reactive({
+    content: '[中国太平洋财产保险股份有限公司嘉兴中心支公司    199****7871]',
+    width: 120,
+    height: 64,
+    image: '',
+    font: {
+      // color: 'rgba(225, 225, 225, 1)',
+      color: 'rgba(0,0,0,1)', // 字体颜色
+      fontSize: '16', // 字体大小
+      fontWeight: 'bold', // 字重 normal
+      fontFamily: 'Georgia', // 字体  sans-serif
+      fontStyle: 'italic', // 字体样式 normal
+      textAlign: 'left', // 文本对齐
+      textBaseline: 'top', // 文本基线 hanging\alphabetic\middle\bottom\top
+    },
+    rotate: 40, // 水印的旋转角度，90至-90
+    gap: [0, 0],// 水印之间的间距[水平, 垂直]
+    zIndex: 9, // 水印元素的z-index值
+  })
+  const canvasWidth = ref(120);
+  const canvasHeight = ref(60);
+  const imgSrc = ref('')
+
+  onMounted(() => {
+    initCanvas();
+  });
+  
+  const initCanvas = () => {
+    const {rotate, width, height, font, content, gap, image} = watermark;
+    const {color, fontSize, fontWeight, fontFamily, fontStyle, textAlign, textBaseline} = font;
+    console.log(content);
+    let _imgSrc = '', contentLen = 0, contentHeight = 0, radian = 0;
+    // 计算旋转弧度，弧度 = (Math.PI/180) * 角度
+    if(rotate) {
+      radian = Math.abs(rotate) / 360 * 2 * Math.PI
+    }
+    if(content) {
+      const tempDiv = document.getElementById('watermarkContent');
+      // 水印文本长度（差异值20）
+      contentLen = tempDiv.offsetWidth + 20;
+      // 水印文本高度
+      contentHeight = tempDiv.offsetHeight;
+
+      // 创建水印 Canvas 对象实例
+      const watermarkCanvas = document.createElement('canvas');
+      // 放到body中
+      document.body.appendChild(watermarkCanvas);
+      // 初始化水印画布大小
+      watermarkCanvas.width = contentLen;
+      watermarkCanvas.height = contentHeight;
+      // 水印 Canvas 对象上下文实例（动画动作绘图等都是在他的身上完成）
+      const watermarkContext = watermarkCanvas.getContext("2d");
+      // 设置填充文字样式
+      watermarkContext.fillStyle = color;
+      watermarkContext.textAlign = textAlign;
+      watermarkContext.textBaseline = textBaseline;
+      // normal bold 24px PingFang SC, PingFang SC-Medium
+      watermarkContext.font = `${fontStyle} ${fontWeight} ${fontSize}px ${fontFamily}`;
+      // 居中显示水印
+      watermarkContext.fillText(content, 0, 0);
+      // 绘制
+      watermarkContext.stroke();
+      // 导出透明背景的图片
+      const dataURL = watermarkCanvas.toDataURL('image/png', 1);
+      _imgSrc = dataURL
+      // 销毁水印 Canvas 节点
+      watermarkCanvas.remove();
+    }
+
+    // 创建新 Canvas 对象实例，处理间隔以及旋转，图片水印
+    const myCanvas = document.createElement('canvas');
+    // 放到body中
+    document.body.appendChild(myCanvas);
+    // 新 Canvas 对象上下文实例（动画动作绘图等都是在他的身上完成）
+    const myContext = myCanvas.getContext("2d");
+    const watermarkImg = new Image()
+    watermarkImg.src = _imgSrc || image;
+    watermarkImg.onload = () => {
+      if(rotate) { // 有角度，则需计算出水印倾斜后的实际宽高
+        let mergeWeight = watermarkImg.height * math.sin(radian) + watermarkImg.width * math.cos(radian);
+        let mergeHeight = watermarkImg.width * math.sin(radian) + watermarkImg.height * math.cos(radian);
+        if(Math.abs(rotate) === 90) {
+          mergeWeight = watermarkImg.height * 1 + watermarkImg.width * 0;
+          mergeHeight = watermarkImg.width * 1 + watermarkImg.height * 0;
+        }
+        canvasWidth.value = myCanvas.width = mergeWeight + gap[0];
+        canvasHeight.value = myCanvas.height = mergeHeight + gap[1];
+        // 旋转是以画布的左上角为原点旋转的，先将原点平移到画布中心位置
+        myContext.translate(mergeWeight / 2, mergeHeight / 2);
+        myContext.rotate(rotate > 0 ? radian : -radian);
+        // 水印是按照画布的中心点旋转的，画布的真实长宽也是按照水印的宽高以及旋转角度计算出来的
+        // 所以此时水印的X轴绝对处于未添加间隔前画布的对角线上且原点处于画布的对角线的交点上
+        // 故此只需要计算出来水印应该往X轴的反方向移动对少像素，以及向Y轴移动水印高的一半即可
+        let dx = 0;
+        if(Math.abs(rotate) > 45) {
+          dx = -((mergeHeight / math.sin(radian)) / 2);
+        } else {
+          dx = -((mergeWeight / 2) / math.cos(radian));
+        }
+        if(Math.abs(rotate) === 90) { // 90°转换为弧度后计算出来的值会存在问题
+          dx = -(mergeHeight / 2);
+        }
+        myContext.translate(dx, -watermarkImg.height / 2);
+        // 间隙
+        if(gap[0]) {
+          let dy = math.sin(radian) * (gap[0] / 2);
+          let dx = dy / math.tan(radian);
+          myContext.translate(dx, rotate < 0 ? dy : -dy);
+        }
+        if(gap[1]) {
+          let dy = math.cos(radian) * (gap[1] / 2);
+          let dx = math.tan(radian) * dy;
+          myContext.translate(rotate < 0 ? -dx : dx, dy);
+        }
+        // 绘制
+        myContext.drawImage(watermarkImg, 0, 0);
+      } else { // 无角度，则宽高只需要在原始水印加上对应的间隔即可
+        canvasWidth.value = gap[0] + watermarkImg.width;
+        canvasHeight.value = gap[1] + watermarkImg.height;
+        console.log('canvasWidth', canvasWidth.value);
+        console.log('canvasHeight', canvasHeight.value);
+        myCanvas.width = canvasWidth.value;
+        myCanvas.height = canvasHeight.value;
+        // 绘制(居中显示)
+        myContext.drawImage(watermarkImg, gap[0] / 2, gap[1] / 2);
+      }
+      // 导出透明背景的图片
+      const myDataURL = myCanvas.toDataURL('image/png', 1);
+      imgSrc.value = myDataURL;
+      // 销毁 Canvas 节点
+      myCanvas.remove();
+    }
+  }
+
+  // 子组件暴露
+  defineExpose({});
+
+</script>
+
+<template>
+  <div style="display: flex;">
+    <el-form ref="form" inline :model="watermark" :label-width="130" >
+      <el-form-item label="水印角度" style="width: 100%;">
+        <el-input-number :max="90" :min="-90" v-model="watermark.rotate" controls-position="right" @change="initCanvas" />
+      </el-form-item>
+      <el-form-item label="水印间隙（上下）" style="width: 100%;">
+        <el-input-number :min="0" v-model="watermark.gap[0]" controls-position="right" @change="initCanvas" />
+      </el-form-item>
+      <el-form-item label="水印间隙（左右）" style="width: 100%;">
+        <el-input-number :min="0" v-model="watermark.gap[1]" controls-position="right" @change="initCanvas" />
+      </el-form-item>
+    </el-form>
+    <!-- <canvas class="myCanvas" id="myCanvas" :width="120" :height="64" :style="{zIndex: watermark.zIndex}"></canvas> -->
+    <img :src="imgSrc" :style="{width: canvasWidth + 'px', height: canvasHeight + 'px'}" style="background-color: #f2f2f2;"/>
+
+    <span id="watermarkContent" :style="{
+      position: 'fixed',
+      left: '-1000px',
+      top: '-1000px',
+      fontSize: watermark.font.fontSize + 'px',
+      fontFamily: watermark.font.fontFamily,
+      fontWeight: watermark.font.fontWeight,
+      fontStyle: watermark.font.fontStyle,
+    }">{{ watermark.content }}</span>
+  </div>
+</template>
+
+<style lang="less" scoped>
+
+</style>
diff --git a/src/components/watermark/index.vue b/src/components/watermark/index.vue
new file mode 100644
index 0000000..8b8abdd
--- /dev/null
+++ b/src/components/watermark/index.vue
@@ -0,0 +1,183 @@
+<script setup>
+  import * as math from 'mathjs';
+  import { onMounted, reactive, ref, computed, watch, nextTick } from 'vue';
+
+  defineOptions({name: ''});
+  const props = defineProps({
+    // width: {type: Number, default: 120}, // 水印的宽度，
+    // height: {type: Number, default: 64}, // 水印的高度，
+    rotate: {type: Number, default: -30}, // 水印的旋转角度, 单位 °，取值范围[-90, 90]
+    zIndex: {type: Number, default: -1}, // 水印元素的z-index值
+    image: {type: String, default: ''}, // 水印图片，建议使用 2x 或 3x 图像
+    content: {type: String, default: '测试水印[123456789]'}, // 水印文本内容
+    font: {
+      type: Object, default: () => {
+        return {
+          // color: 'rgba(225, 225, 225, 0.5)', // 字体颜色
+          color: 'rgba(0, 0, 0, 0.5)', // 字体颜色
+          fontSize: '20', // 字体大小
+          fontWeight: 'bold', // 字重 normal
+          fontFamily: 'Georgia', // 字体 sans-serif
+          fontStyle: 'normal', // 字体样式 normal
+          textAlign: 'left', // 文本对齐
+          textBaseline: 'top', // 文本基线 hanging\alphabetic\middle\bottom\top}
+        }
+      },
+    },
+    gap: {type: Array, default: () => [50, 100]}, // 水印之间的间距[行，纵]
+    offset: {type: Array, default: () => [0, 0]}, // 水印从容器左上角的偏移 默认值为 gap/2 [top, left]
+  })
+  const canvasWidth = ref(120);
+  const canvasHeight = ref(60);
+  const imgSrc = ref('');
+  const emits = defineEmits(['on-ok']);
+  // watch(() => foo, (newValue, oldValue) => {})
+  onMounted(() => {
+    initCanvas();
+  });
+  
+  const initCanvas = () => {
+    // width, height, 
+    const {rotate, font, content, gap, image} = props;
+    const {color, fontWeight, fontFamily, fontStyle, textAlign, textBaseline} = font;
+    const fontSize = font.fontSize + 'px';
+    let _imgSrc = '', contentLen = 0, contentHeight = 0, radian = 0;
+    // 计算旋转弧度，弧度 = (Math.PI/180) * 角度
+    if(rotate) {
+      radian = Math.abs(rotate) > 90 ? 0 : Math.abs(rotate) / 360 * 2 * Math.PI
+    }
+    // 先将文字转为图片
+    if(content) {
+      // 获取水印文本长度以及高度
+      const contentSpan = document.getElementById('watermarkContent');
+      contentLen = contentSpan.offsetWidth;
+      contentHeight = contentSpan.offsetHeight;
+
+      // 创建水印 Canvas 对象实例
+      const watermarkCanvas = document.createElement('canvas');
+      // 放到body中
+      document.body.appendChild(watermarkCanvas);
+      // 初始化水印画布大小
+      watermarkCanvas.width = contentLen;
+      watermarkCanvas.height = contentHeight;
+      // 水印 Canvas 对象上下文实例（动画动作绘图等都是在他的身上完成）
+      const watermarkContext = watermarkCanvas.getContext("2d");
+      // 设置填充文字样式
+      watermarkContext.fillStyle = color;
+      watermarkContext.textAlign = textAlign;
+      watermarkContext.textBaseline = textBaseline;
+      // normal bold 24px PingFang SC, PingFang SC-Medium
+      const fontList = [fontStyle, fontWeight, fontSize, fontFamily].filter(item => item)
+      watermarkContext.font = fontList.join(' ');
+      // 居中显示水印
+      watermarkContext.fillText(content, 0, 0);
+      // 绘制
+      watermarkContext.stroke();
+      // 导出透明背景的图片
+      const dataURL = watermarkCanvas.toDataURL('image/png', 1);
+      _imgSrc = dataURL
+      // 销毁水印 Canvas 节点
+      watermarkCanvas.remove();
+    }
+    // 而后将图片作为基本单元重新放入canvas进一步进行旋转间隔等
+    if(_imgSrc || image) {
+      // 创建新 Canvas 对象实例，处理间隔以及旋转，图片水印
+      const myCanvas = document.createElement('canvas');
+      // 放到body中
+      document.body.appendChild(myCanvas);
+      // 新 Canvas 对象上下文实例（动画动作绘图等都是在他的身上完成）
+      const myContext = myCanvas.getContext("2d");
+      const watermarkImg = new Image()
+      watermarkImg.src = _imgSrc || image;
+      watermarkImg.onload = () => {
+        if(rotate) { // 有角度，则需计算出水印倾斜后的实际宽高
+          let mergeWeight = watermarkImg.height * math.sin(radian) + watermarkImg.width * math.cos(radian);
+          let mergeHeight = watermarkImg.width * math.sin(radian) + watermarkImg.height * math.cos(radian);
+          if(Math.abs(rotate) === 90) { // 90°特殊处理
+            mergeWeight = watermarkImg.height * 1 + watermarkImg.width * 0;
+            mergeHeight = watermarkImg.width * 1 + watermarkImg.height * 0;
+          }
+          canvasWidth.value = myCanvas.width = mergeWeight + gap[0];
+          canvasHeight.value = myCanvas.height = mergeHeight + gap[1];
+          // 旋转是以画布的左上角为原点旋转的，先将原点平移到画布中心位置
+          myContext.translate(mergeWeight / 2, mergeHeight / 2);
+          myContext.rotate(rotate > 0 ? radian : -radian);
+          // 水印是按照画布的中心点旋转的，画布的真实长宽也是按照水印的宽高以及旋转角度计算出来的
+          // 所以此时水印的X轴绝对处于未添加间隔前画布的对角线上且原点处于画布的对角线的交点上
+          // 故此只需要计算出来水印应该往X轴的反方向移动多少像素，以及向Y轴移动水印高的一半即可
+          let dx = 0;
+          if(Math.abs(rotate) > 45) {
+            dx = -((mergeHeight / math.sin(radian)) / 2);
+          } else {
+            dx = -((mergeWeight / 2) / math.cos(radian));
+          }
+          if(Math.abs(rotate) === 90) { // 90°转换为弧度后计算出来的值会存在问题
+            dx = -(mergeHeight / 2);
+          }
+          myContext.translate(dx + 10, -watermarkImg.height / 2);
+          // 间隙
+          if(gap[0]) {
+            let dy = math.sin(radian) * (gap[0] / 2);
+            let dx = dy / math.tan(radian);
+            myContext.translate(dx, rotate < 0 ? dy : -dy);
+          }
+          if(gap[1]) {
+            let dy = math.cos(radian) * (gap[1] / 2);
+            let dx = math.tan(radian) * dy;
+            myContext.translate(rotate < 0 ? -dx : dx, dy);
+          }
+          // 绘制
+          myContext.drawImage(watermarkImg, 0, 0);
+        } else { // 无角度，则宽高只需要在原始水印加上对应的间隔即可
+          canvasWidth.value = gap[0] + watermarkImg.width;
+          canvasHeight.value = gap[1] + watermarkImg.height;
+          myCanvas.width = canvasWidth.value;
+          myCanvas.height = canvasHeight.value;
+          // 绘制(居中显示)
+          myContext.drawImage(watermarkImg, gap[0] / 2, gap[1] / 2);
+        }
+        // 导出透明背景的图片
+        const myDataURL = myCanvas.toDataURL('image/png', 1);
+        imgSrc.value = myDataURL;
+        // 销毁 Canvas 节点
+        myCanvas.remove();
+      }
+    }
+  }
+
+  // 子组件暴露
+  defineExpose({});
+
+</script>
+
+<template>
+  <div class="props" style="position: relative;">
+    <slot></slot>
+    <div :style="{
+      'z-index': zIndex,
+      'position': 'absolute',
+      'top': props.offset[0] + 'px',
+      'left': props.offset[1] + 'px',
+      'width': '100%',
+      'height': '100%',
+      'pointer-events': 'none',
+      'background-repeat': 'repeat',
+      'background-position': '0px 0px',
+      'background-image': `url(${imgSrc})`,
+    }" class="watermarkBg"></div>
+    <!-- 用于获取水印文字的宽高 -->
+    <span id="watermarkContent" :style="{
+      position: 'fixed',
+      left: '-1000px',
+      top: '-1000px',
+      fontSize: props.font.fontSize + 'px',
+      fontFamily: props.font.fontFamily,
+      fontWeight: props.font.fontWeight,
+      fontStyle: props.font.fontStyle,
+    }">{{ props.content }}</span>
+  </div>
+</template>
+
+<style lang="less" scoped>
+
+</style>
-- 
GitLab