Vue入门必备：轻松添加文字到图片的实用技巧

方法一：使用 HTML5 Canvas

<template>
  <div>
    <canvas ref="watermarkCanvas" width="300" height="200"></canvas>
    <img ref="image" src="example.jpg" alt="Example Image" @load="addWatermark" />
  </div>
</template>

<script>
export default {
  methods: {
    addWatermark() {
      const canvas = this.$refs.watermarkCanvas;
      const ctx = canvas.getContext('2d');
      const img = this.$refs.image;
      ctx.drawImage(img, 0, 0);

      // 添加文字水印
      ctx.font = '14px Arial';
      ctx.fillStyle = 'rgba(255, 255, 255, 0.5)';
      ctx.fillText('Watermark', 100, 150);
    }
  }
}
</script>

方法二：使用第三方库

<template>
  <div>
    <vue-watermark :text="watermarkText" :font-size="20" :font-family="'Arial'" :color="'rgba(255, 255, 255, 0.5)'" :x="100" :y="100"></vue-watermark>
    <img src="example.jpg" alt="Example Image" />
  </div>
</template>

<script>
import VueWatermark from 'vue-watermark';

export default {
  components: {
    VueWatermark
  },
  data() {
    return {
      watermarkText: 'Watermark'
    };
  }
}
</script>

方法三：使用 CSS

如果你只是想添加简单的文字水印，可以使用 CSS 来实现。以下是一个示例：

<template>
  <div>
    <img src="example.jpg" alt="Example Image" style="position: relative;">
    <div style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255, 255, 255, 0.5); color: #fff; font-size: 14px; text-align: center; line-height: 200px;">Watermark</div>
  </div>
</template>

总结