Vue 实现图片马赛克与涂鸦功能的方法

在前端开发中，为图片添加马赛克与涂鸦功能可以增强用户与图片的交互性，满足一些特定的业务需求，比如图片隐私处理、创意标注等。本文将介绍如何使用 Vue 实现这些功能。

图片马赛克功能实现

我们需要创建一个 Vue 组件。在模板部分，我们定义一个 canvas 元素，用于绘制马赛克效果的图片。

<template>
  <canvas ref="mosaicCanvas" id="mosaicCanvas"></canvas>
</template>

<script>
export default {
  data() {
    return {
      originalImage: null,
      mosaicLevel: 10 // 马赛克程度
    };
  },
  mounted() {
    this.loadImage();
  },
  methods: {
    loadImage() {
      const image = new Image();
      image.src = 'your-image-url';
      image.onload = () => {
        this.originalImage = image;
        this.drawMosaic();
      };
    },
    drawMosaic() {
      const canvas = this.$refs.mosaicCanvas;
      const ctx = canvas.getContext('2d');
      canvas.width = this.originalImage.width;
      canvas.height = this.originalImage.height;

      const tileSize = this.mosaicLevel;
      for (let y = 0; y < canvas.height; y += tileSize) {
        for (let x = 0; x < canvas.width; x += tileSize) {
          const imgData = ctx.getImageData(x, y, tileSize, tileSize);
          const avgColor = this.calculateAverageColor(imgData);
          ctx.fillStyle = `rgb(${avgColor.r}, ${avgColor.g}, ${avgColor.b})`;
          ctx.fillRect(x, y, tileSize, tileSize);
        }
      }
    },
    calculateAverageColor(imgData) {
      const data = imgData.data;
      let r = 0, g = 0, b = 0;
      const length = data.length;
      for (let i = 0; i < length; i += 4) {
        r += data[i];
        g += data[i + 1];
        b += data[i + 2];
      }
      const count = length / 4;
      return {
        r: Math.round(r / count),
        g: Math.round(g / count),
        b: Math.round(b / count)
      };
    }
  }
};
</script>

图片涂鸦功能实现

对于涂鸦功能，同样在模板中定义一个 canvas 元素。我们通过监听鼠标事件来实现涂鸦效果。

<template>
  <canvas ref="drawingCanvas" id="drawingCanvas" @mousedown="startDrawing" @mousemove="draw" @mouseup="stopDrawing"></canvas>
</template>

<script>
export default {
  data() {
    return {
      isDrawing: false,
      lastX: 0,
      lastY: 0,
      lineWidth: 5,
      strokeColor: 'black'
    };
  },
  methods: {
    startDrawing(e) {
      this.isDrawing = true;
      this.lastX = e.offsetX;
      this.lastY = e.offsetY;
    },
    draw(e) {
      if (this.isDrawing) {
        const canvas = this.$refs.drawingCanvas;
        const ctx = canvas.getContext('2d');
        ctx.beginPath();
        ctx.strokeStyle = this.strokeColor;
        ctx.lineWidth = this.lineWidth;
        ctx.moveTo(this.lastX, this.lastY);
        ctx.lineTo(e.offsetX, e.offsetY);
        ctx.stroke();
        this.lastX = e.offsetX;
        this.lastY = e.offsetY;
      }
    },
    stopDrawing() {
      this.isDrawing = false;
    }
  }
};
</script>

通过上述代码，我们分别实现了 Vue 项目中的图片马赛克与涂鸦功能。在实际应用中，可以根据需求进一步优化和扩展这些功能，比如添加更多的配置选项、与后端进行数据交互等，以满足复杂的业务场景。