uni-app背景加水印

在uni-app中添加水印可以通过以下步骤实现：

1. 在需要添加水印的元素上创建一个canvas元素。
2. 将canvas元素的宽高设置为与父元素相同。
3. 在canvas上绘制水印文字或图片。
4. 将canvas元素的样式设置为position:absolute，z-index高于其他元素。
5. 将canvas元素插入到父元素中。

以下是一个简单的代码示例：

<template>
  <div class="container">
    <img src="./image.jpg" alt="image" />
    <canvas class="watermark"></canvas>
  </div>
</template>

<script>
export default {
  mounted() {
    const canvas = document.querySelector('.watermark')
    const ctx = canvas.getContext('2d')
    canvas.width = canvas.parentNode.offsetWidth
    canvas.height = canvas.parentNode.offsetHeight
    ctx.font = '24px Arial'
    ctx.fillStyle = 'rgba(255, 255, 255, 0.5)'
    ctx.fillText('watermark', 50, 50)
  },
}
</script>

<style>
.container {
  position: relative;
  display: inline-block;
}

.watermark {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 999;
}
</style>

在上面的示例中，我们在一个包含图片的div容器中添加了一个canvas元素作为水印。我们使用canvas API绘制了一个半透明的文字水印，并将canvas元素的样式设置为position:absolute，z-index高于其他元素。这样，水印就会在图片上方显示。