How to perform image processing and image filters in Vue

How to perform image processing and image filters in Vue

Image manipulation and image filters are a common need in Vue applications. This article will introduce how to use Vue.js and some common image processing libraries to implement image processing and filter functions. We will use the following libraries to accomplish this task:

• Vue.js - A popular JavaScript framework.
• Canvas API - API for creating and manipulating canvas elements.
• fabric.js - A powerful graphics library based on the Canvas API.
• CamanJS - An image processing library based on the Canvas API.
  

install dependencies

We'll use the Vue CLI to create a new Vue application. First, you need to install Node.js and npm. Then, you can install Vue CLI with the following command:

npm install -g @vue/cli

Next, create a new Vue application with the following command:

vue create image-processing-app

Once installed, go into the project directory and install the dependencies we'll be using:

cd image-processing-app
npm install --save fabric caman

Now, we're ready to start writing code.

Create Vue components

We will create a Vue component to implement image manipulation and image filter functionality. We will use the following HTML template:

<template>
  <div>
    <div>
      <input type="file" @change="onFileChange" />
    </div>
    <div>
      <canvas ref="canvas" />
    </div>
    <div>
      <button @click="applyFilter('brightness', 10)">增加亮度</button>
      <button @click="applyFilter('brightness', -10)">减少亮度</button>
      <button @click="applyFilter('contrast', 10)">增加对比度</button>
      <button @click="applyFilter('contrast', -10)">减少对比度</button>
      <button @click="applyFilter('saturation', 10)">增加饱和度</button>
      <button @click="applyFilter('saturation', -10)">减少饱和度</button>
      <button @click="applyFilter('vintage')">复古</button>
      <button @click="applyFilter('lomo')">Lomo</button>
      <button @click="applyFilter('clarity')">清晰</button>
      <button @click="applyFilter('sincity')">复古电影</button>
      <button @click="applyFilter('sunrise')">日出</button>
    </div>
  </div>
</template>

This template contains a file picker and a canvas element. We also added some buttons to apply different filters.

Next, we will implement these functions in Vue components. We'll use fabric.js to load and draw images. In the Vue component, we can use mountedthe hook to initialize fabric.js:

import fabric from 'fabric';

export default {
    
    
  mounted() {
    
    
    this.canvas = new fabric.Canvas(this.$refs.canvas);

    this.canvas.setBackgroundColor('#ffffff', this.canvas.renderAll.bind(this.canvas));
  },
}

This snippet initializes a new fabric.js canvas and binds it to a Vue component canvasproperty. We also use setBackgroundColorthe method to set the background color of the canvas.

Next, we'll implement the logic for the file picker. We will use HTML5's File API to read the file selected by the user. In Vue components, we can use the following code to achieve this function:

export default {
    
    
  methods: {
    
    
    onFileChange(e) {
    
    
      const file = e.target.files[0];

      const reader = new FileReader();
      reader.onload = (e) => {
    
    
        const img = new Image();
        img.onload = () => {
    
    
          const fabricImg = new fabric.Image(img);
          fabricImg.set({
    
    
            left: 0,
            top: 0,
          });
          this.canvas.clear();
          this.canvas.add(fabricImg);
          this.canvas.renderAll();
        };
       img.src = e.target.result;
      };
      reader.readAsDataURL(file);
    },
  },
};

This code snippet first gets the file selected by the user. We then use FileReaderthe object to read the file asynchronously. When the file reading is complete, we create a new image object and add it to the fabric.js canvas.

Next, we'll implement the logic to apply the filter. We will use CamanJS to apply different filters. In Vue components, we can use the following code to achieve this function:

import Caman from 'caman';

export default {
    
    
  methods: {
    
    
    applyFilter(filter, value) {
    
    
      Caman(this.canvas.toDataURL(), function () {
    
    
        this[filter](value).render(() => {
    
    
          const img = new Image();
          img.onload = () => {
    
    
            const fabricImg = new fabric.Image(img);
            fabricImg.set({
    
    
              left: 0,
              top: 0,
            });
            this.canvas.clear();
            this.canvas.add(fabricImg);
            this.canvas.renderAll();
          };
          img.src = this.toBase64();
        });
      });
    },
  },
};

This code snippet uses CamanJS to get the data URL of the current image from the fabric.js canvas. Then, we use the CamanJS API to apply the selected filter. When the filter application is complete, we create a new image object and add it to the fabric.js canvas.

Finally, we need to export the Vue component:

export default {
    
    
  // ...
};

full code

Below is the complete code of the entire Vue component:

<template>
  <div>
    <div>
      <input type="file" @change="onFileChange" />
    </div>
    <div>
      <canvas ref="canvas" />
    </div>
    <div>
      <button @click="applyFilter('brightness', 10)">增加亮度</button>
      <button @click="applyFilter('brightness', -10)">减少亮度</button>
      <button @click="applyFilter('contrast', 10)">增加对比度</button>
      <button @click="applyFilter('contrast', -10)">减少对比度</button>
      <button @click="applyFilter('saturation', 10)">增加饱和度</button>
      <button @click="applyFilter('saturation', -10)">减少饱和度</button>
      <button @click="applyFilter('vintage')">复古</button>
      <button @click="applyFilter('lomo')">Lomo</button>
      <button @click="applyFilter('clarity')">清晰</button>
      <button @click="applyFilter('sincity')">复古电影</button>
      <button @click="applyFilter('sunrise')">日出</button>
    </div>
  </div>
</template>

<script>
import fabric from 'fabric';
import Caman from 'caman';

export default {
      
      
  mounted() {
      
      
    this.canvas = new fabric.Canvas(this.$refs.canvas);

    this.canvas.setBackgroundColor('#ffffff', this.canvas.renderAll.bind(this.canvas));
  },
  methods: {
      
      
    onFileChange(e) {
      
      
      const file = e.target.files[0];

      const reader = new FileReader();
      reader.onload = (e) => {
      
      
        const img = new Image();
        img.onload = () => {
      
      
          const fabricImg = new fabric.Image(img);
          fabricImg.set({
      
      
            left: 0,
            top: 0,
          });
          this.canvas.clear();
          this.canvas.add(fabricImg);
          this.canvas.renderAll();
        };
        img.src = e.target.result;
      };
      reader.readAsDataURL(file);
    },
    applyFilter(filter, value) {
      
      
      Caman(this.canvas.toDataURL(), function () {
      
      
        this[filter](value).render(() => {
      
      
          const img = new Image();
          img.onload = () => {
      
      
            const fabricImg = new fabric.Image(img);
            fabricImg.set({
      
      
              left: 0,
              top: 0,
            });
            this.canvas.clear();
            this.canvas.add(fabricImg);
            this.canvas.renderAll();
          };
          img.src = this.toBase64();
        });
      });
    },
  },
};
</script>

in conclusion

In this article, we introduced how to use Vue.js and some common image processing libraries to implement image processing and filter functions. We use the Canvas API and fabric.js to load and draw images, and use