How to achieve the suspected oil painting and sketch effect of pictures through Vue?

How to achieve the suspected oil painting and sketch effects of pictures through Vue?

Vue is an excellent JavaScript framework that allows us to build user interfaces more conveniently and efficiently. During the development process, it often involves processing images and adding effects. This article will introduce how to use Vue to achieve the suspected oil painting and sketch effects of images, making your web pages more unique and attractive.

1. Preparation
   Before we start, we need to prepare a Vue project. You can use the Vue CLI, the official scaffolding tool provided by Vue, to create a project. For specific steps, please refer to the Vue official documentation.
2. Import images
   We first need to import an image, create an images folder in the public directory of the Vue project, and add the file you want to process The picture is placed in it, such as test.jpg.
3. Add filter effects
   In Vue, we can use CSS filter effects to achieve suspected oil painting and sketch effects. First, introduce the image into the Vue component:

<template>
  <div>
    <img :src="imageUrl" alt="Example Image" class="image-filter" />
  </div>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: "/images/test.jpg" // 图片路径
    };
  }
};
</script>

<style>
.image-filter {
  filter: /* 添加滤镜效果的样式 */ ;
}
</style>

4. To achieve a suspected oil painting effect
   To achieve a suspected oil painting effect, we can use the filter attribute of CSS contrast, saturate and blur to adjust the saturation, contrast and blur of the image. The following is a simple example:

.image-filter {
  filter: contrast(150%) saturate(50%) blur(1px);
}

You can adjust it according to your needs to achieve satisfactory results.

5. Achieve sketch effect
   To achieve sketch effect, we can use brightness and grayscale in the filter attribute of CSS to adjust the brightness and grayscale of the picture. Here's a simple example:

.image-filter {
  filter: brightness(150%) grayscale(100%);
}

Again, you can adjust it to suit your needs.

6. Run the project
   After completing the above steps, you can use Vue's development server to run the project, and then open the project page in the browser, you can see that the suspected oil paintings and sketches have been added Pictures of the effect.

The above is a simple example of using Vue to achieve the suspected oil painting and sketch effects of pictures. I hope this article can help you make better use of the Vue framework to achieve various special effects and make your web pages more vivid and attractive.

The above is the detailed content of How to achieve the suspected oil painting and sketch effect of pictures through Vue?. For more information, please follow other related articles on the PHP Chinese website!