How to implement image overlay and brush drawing in Vue?

How to implement image overlay and brush drawing in Vue?

Overview:
In Vue applications, we often encounter scenes where we need to cover pictures and draw them with brushes. This article will introduce how to use Vue and the Canvas element of HTML5 to achieve such a function.

Step 1: Create a Vue component
First, we need to create a Vue component to host our Canvas element and related operations. In the component, we will use data binding to handle the state of the image and drawing parameters.

<template>
  <div>
    <canvas ref="canvas" @mousedown="startDrawing" @mousemove="drawing" @mouseup="stopDrawing"></canvas>
    <input type="file" @change="handleFileUpload" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      image: null,  // 存储上传的图片
      isDrawing: false,  // 表示是否正在绘制
      lastX: 0,  // 记录上一个点的X坐标
      lastY: 0,  // 记录上一个点的Y坐标
      brushSize: 10,  // 笔刷大小
    };
  },
  methods: {
    handleFileUpload(e) {
      const file = e.target.files[0];
      const reader = new FileReader();

      reader.onload = (e) => {
        this.image = new Image();
        this.image.onload = () => {
          this.draw();
        };
        this.image.src = e.target.result;
      };

      reader.readAsDataURL(file);
    },
    draw() {
      const canvas = this.$refs.canvas;
      const context = canvas.getContext('2d');
      context.drawImage(this.image, 0, 0);
    },
    startDrawing(e) {
      this.isDrawing = true;
      this.lastX = e.clientX - this.$refs.canvas.offsetLeft;
      this.lastY = e.clientY - this.$refs.canvas.offsetTop;
    },
    drawing(e) {
      if (!this.isDrawing) return;

      const canvas = this.$refs.canvas;
      const context = canvas.getContext('2d');
      context.strokeStyle = '#000';
      context.lineJoin = 'round';
      context.lineWidth = this.brushSize;

      context.beginPath();
      context.moveTo(this.lastX, this.lastY);
      context.lineTo(e.clientX - canvas.offsetLeft, e.clientY - canvas.offsetTop);
      context.closePath();
      context.stroke();

      this.lastX = e.clientX - canvas.offsetLeft;
      this.lastY = e.clientY - canvas.offsetTop;
    },
    stopDrawing() {
      this.isDrawing = false;
    },
  },
};
</script>

Step 2: Handle image upload
In the component, we added an input tag for file upload and bound the handleFileUpload method. This method uses the FileReader object to read the image content after the user selects the image, and loads it as the src attribute of Image. When the image is loaded, call the draw method to draw the image onto the Canvas.

Step 3: Process the drawing operation
We handle the drawing operation by listening to the mouse event of the Canvas. When the mouse is pressed, call the startDrawing method, set isDrawing to true, and record the coordinates of the mouse click. (The coordinates here need to be subtracted from the offset of the Canvas element). Then, whenever the mouse moves, the drawing method is called and the line is drawn using Canvas's lineTo method based on the current position and the previous position. Finally, call the stopDrawing method and set isDrawing to false, indicating the end of drawing.

The basic implementation of this component is like this. In order for it to take effect, it also needs to be referenced and used where the component is used.

<template>
  <div>
    <image-drawing></image-drawing>
  </div>
</template>

<script>
import ImageDrawing from './ImageDrawing.vue';

export default {
  components: {
    ImageDrawing,
  },
};
</script>

Summary:
This article introduces how to use Vue and the Canvas element of HTML5 to implement image overlay and brush drawing functions. Through Vue's data binding and the drawing API provided by Canvas, we can enable users to upload pictures and operate and draw on the pictures. Hopefully this article will help you get started implementing functionality like this in your Vue application.

The above is the detailed content of How to implement image overlay and brush drawing in Vue?. For more information, please follow other related articles on the PHP Chinese website!