How to create realistic oil painting effects using Vue and Canvas

How to use Vue and Canvas to create realistic oil painting effects

Introduction:
Oil paintings are world-famous for their rich textures and delicate effects. Nowadays, with the powerful functions of Vue and Canvas, we can simulate the realistic effects of oil paintings through programming. This article will introduce you how to use Vue and Canvas to create realistic oil painting effects, and attach corresponding code examples.

1. Preparation
First, we need to introduce the Canvas element into the Vue project. Add a canvas tag to the template in the Vue component and give it a unique ID, for example:

<template>
  <canvas id="oil-painting-canvas"></canvas>
</template>

Next, get the canvas element in the calculated property of the Vue component for subsequent operations:

computed: {
  canvasElement() {
    return document.getElementById('oil-painting-canvas')
  }
}

At the same time, we need to obtain the drawing context:

computed: {
  canvasContext() {
    return this.canvasElement.getContext('2d')
  }
}

2. Draw the basic image
Before starting to create the effect of oil painting, we need to draw a basic image on Canvas as the bottom layer. This can be any picture. In the life cycle hook function mounted() of the Vue component, draw the image onto the Canvas:

mounted() {
  const image = new Image()
  image.src = require('@/assets/base-image.jpg')
  image.onload = () => {
    this.canvasContext.drawImage(image, 0, 0)
  }
}

In this way, we successfully draw a basic image on the Canvas.

3. Create oil painting effect
Next, we will add oil painting effect to Canvas. In the calculated properties of the Vue component, define a method to simulate the effect of oil painting:

computed: {
  oilPaintingEffect() {
    const imageData = this.canvasContext.getImageData(0, 0, this.canvasElement.width, this.canvasElement.height)
    const data = imageData.data

    for (let i = 0; i < data.length; i += 4) {
      const r = data[i]
      const g = data[i + 1]
      const b = data[i + 2]

      const gray = 0.2989 * r + 0.587 * g + 0.114 * b // 将像素点转化为灰度值

      data[i] = data[i + 1] = data[i + 2] = gray // 将RGB值设置为灰度值，使图片变成黑白色调
    }

    this.canvasContext.putImageData(imageData, 0, 0)
  }
}

In the above code, we use the getImageData() method to obtain the data of each pixel on the Canvas , and then use the average of the RGB values ​​as the grayscale value to convert the pixels into black and white tones, simulating the effect of an oil painting. Finally, the processed image data is redrawn to the Canvas through the putImageData() method.

4. Add interactivity
We can enable users to interact with the oil painting effect by adding interactivity. In the method of the Vue component, add a mouse event listener to achieve interactive effects:

methods: {
  handleMousemove(event) {
    const x = event.offsetX
    const y = event.offsetY

    const imageData = this.canvasContext.getImageData(0, 0, this.canvasElement.width, this.canvasElement.height)
    const data = imageData.data

    for (let i = 0; i < data.length; i += 4) {
      const distance = Math.sqrt((x - i / 4 % this.canvasElement.width) ** 2 + (y - Math.floor(i / 4 / this.canvasElement.width)) ** 2)
      const opacity = Math.max(0, 0.8 - distance / 100) // 控制透明度，距离鼠标越远，透明度越低

      data[i + 3] = opacity * 255 // 将透明度应用到像素点上
    }

    this.canvasContext.putImageData(imageData, 0, 0)
  }
}

In this code, we listen to the mouse movement event and calculate the coordinates of the mouse. By calculating the distance of the mouse relative to the pixels, the transparency changes are controlled to achieve the interactivity of the oil painting effect.

5. Event binding
In order for the above interactive effect to take effect, we need to bind the mouse event to the Canvas element. In the template of the Vue component, bind the handleMousemove method to the mousemove event of Canvas:

<template>
  <canvas id="oil-painting-canvas" @mousemove="handleMousemove"></canvas>
</template>

Conclusion:
By combining Vue and Canvas, we can use code to Simulate the realistic effect of oil painting and achieve interactivity. This article shows you how to create realistic oil painting effects in a Vue project, with corresponding code examples. Hope this article helps you!

The above is the detailed content of How to create realistic oil painting effects using Vue and Canvas. For more information, please follow other related articles on the PHP Chinese website!