当前位置：首页 > VUE

vue实现canvas照片水印

2026-01-22 20:24:33VUE

实现思路

在Vue中实现Canvas照片水印，核心是通过Canvas API绘制图片和水印文字，最终导出为新的图片。主要分为加载图片、绘制水印、导出结果三个关键步骤。

基础实现代码

以下是一个完整的Vue组件示例，实现图片上传后添加水印功能：

<template>
  <div>
    <input type="file" @change="handleImageUpload" accept="image/*" />
    <canvas ref="canvas" style="border: 1px solid #ccc;"></canvas>
    <button @click="downloadImage" v-if="hasWatermark">下载图片</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hasWatermark: false,
      originalImage: null
    }
  },
  methods: {
    handleImageUpload(e) {
      const file = e.target.files[0]
      if (!file) return

      const reader = new FileReader()
      reader.onload = (event) => {
        this.originalImage = new Image()
        this.originalImage.src = event.target.result
        this.originalImage.onload = () => {
          this.drawWatermark()
        }
      }
      reader.readAsDataURL(file)
    },

    drawWatermark() {
      const canvas = this.$refs.canvas
      const ctx = canvas.getContext('2d')

      // 设置canvas尺寸与图片一致
      canvas.width = this.originalImage.width
      canvas.height = this.originalImage.height

      // 绘制原始图片
      ctx.drawImage(this.originalImage, 0, 0)

      // 设置水印样式
      ctx.font = '20px Arial'
      ctx.fillStyle = 'rgba(255, 255, 255, 0.5)'
      ctx.textAlign = 'center'
      ctx.textBaseline = 'middle'

      // 绘制水印文字
      const text = '机密文件'
      const x = canvas.width / 2
      const y = canvas.height / 2
      ctx.fillText(text, x, y)

      this.hasWatermark = true
    },

    downloadImage() {
      const canvas = this.$refs.canvas
      const link = document.createElement('a')
      link.download = 'watermarked-image.png'
      link.href = canvas.toDataURL('image/png')
      link.click()
    }
  }
}
</script>

水印样式优化

水印效果可以通过以下方式增强：

透明度控制

ctx.fillStyle = 'rgba(255, 255, 255, 0.3)' // 最后一个参数控制透明度

多行水印

// 绘制平铺水印
const text = 'Watermark'
const fontSize = 20
ctx.font = `${fontSize}px Arial`
ctx.rotate(-20 * Math.PI / 180) // 倾斜角度

for (let x = 0; x < canvas.width; x += 150) {
  for (let y = 0; y < canvas.height; y += 100) {
    ctx.fillText(text, x, y)
  }
}

性能优化建议

对于大尺寸图片处理，可以考虑以下优化：

使用离屏Canvas

const offscreenCanvas = document.createElement('canvas')
offscreenCanvas.width = this.originalImage.width
offscreenCanvas.height = this.originalImage.height
const offscreenCtx = offscreenCanvas.getContext('2d')
// 在离屏Canvas上完成所有绘制
offscreenCtx.drawImage(this.originalImage, 0, 0)
// ...绘制水印操作
// 最后将结果绘制到可见Canvas
ctx.drawImage(offscreenCanvas, 0, 0)

响应式处理

使Canvas适应不同屏幕尺寸：

// 在drawWatermark方法中添加
const displayWidth = Math.min(this.originalImage.width, window.innerWidth - 40)
const scale = displayWidth / this.originalImage.width
canvas.style.width = `${displayWidth}px`
canvas.style.height = `${this.originalImage.height * scale}px`