Vue中如何实现图片的灰度和黑白处理？

Vue中如何实现图片的灰度和黑白处理？

1. 灰度处理

灰度处理是指将一张彩色图片转换成灰度图片，即变成只有黑白两种颜色。在Vue中实现灰度处理，有两种方法：第一种是直接在模板中添加CSS filter，第二种是使用Vuex进行状态管理。

1.1 直接在模板中添加CSS filter

这种方法比较简单，只需要使用CSS filter属性的grayscale函数即可。在Vue中，可以使用:class绑定动态class的方式来控制是否添加该filter。比如：

//template部分

<img :src="imgUrl" class="grayscale">
//style部分
.grayscale { 
  filter: grayscale(100%);
}

上面的代码中，通过:class绑定动态class，来控制是否添加CSS filter的grayscale函数。若需要将图片变成灰度图片，则在img元素上添加class=”grayscale”。

1.2 使用Vuex进行状态管理

使用Vuex进行状态管理，可以让灰度处理更加灵活。下面是一个简单的示例：

//store部分

const state = {
  isGray: false,
}
const mutations = {
  setGray(state, isGray) {
    state.isGray = isGray;
  },
}
const actions = {
  toggleGray({ commit }, isGray) {
    commit('setGray', isGray);
  },
}
//template部分
<img :src="imgUrl" v-bind:class="{gray: isGray}">
//style部分
.gray {
  filter: grayscale(100%);
}

上面的代码中，通过Vuex来管理isGray变量的值。如果isGray的值为true，则在img元素上添加class=”gray”，从而实现灰度效果。

2. 黑白处理

黑白处理是指将一张彩色图片转换成黑白图片，即变成只有黑和白两种颜色。在Vue中实现黑白处理，可以使用以下两种方法：

2.1 使用Canvas进行处理

使用Canvas进行图片处理，可以做到更加细致的处理。下面是一个简单的示例：

//template部分

<canvas ref="canvas"></canvas>
//script部分
export default {
  data() {
    return {
      imgUrl: './img/test.jpg',
      canvas: null,
      context: null,
    }
  },
  mounted() {
    this.canvas = this.$refs.canvas;
    this.context = this.canvas.getContext("2d");
    let image = new Image();
    image.src = this.imgUrl;
    image.onload = () => {
      this.canvas.width = image.width;
      this.canvas.height = image.height;
      this.context.drawImage(image, 0, 0);
      let imageData = this.context.getImageData(0, 0, this.canvas.width, this.canvas.height);
      let data = imageData.data;
      for (let i = 0; i < data.length; i += 4) {
        let r = data[i];
        let g = data[i + 1];
        let b = data[i + 2];
        let color = parseInt((r + g + b) / 3);
        data[i] = color;
        data[i + 1] = color;
        data[i + 2] = color;
      }
      this.context.putImageData(imageData, 0, 0);
    }
  },
}

上面的代码中，需要先在template部分添加一个Canvas元素。通过data中的imgUrl变量来加载要处理的图片，然后将图片渲染在Canvas上面。最后通过ImageData和putImageData函数来处理图片。

2.2 使用CSS desaturate和saturate函数进行处理

使用CSS desaturate和saturate函数进行图片处理，也是一种较为简单的方法。下面是一个示例：

//template部分

<img :src="imgUrl" v-bind:style="{ filter: 'saturate(' + (1.0 - saturation) + ') }'">
//script部分
export default {
  data() {
    return {
      imgUrl: './img/test.jpg',
      saturation: 0.0,
    }
  },
}

上面的代码中，通过data中的saturation变量来控制图片的饱和度。使用saturate函数将图片饱和度调整到最大，使用desaturate函数将图片饱和度调整到最小。通过在CSS filter中绑定动态变量saturation，来控制图片的黑白程度。

通过以上两种方法，我们可以简单快捷地实现图片的灰度和黑白处理。不过需要注意的是，在使用Canvas进行处理的时候，需要处理好图片的宽高比例和像素密度问题。此外，在处理图片的时候，可以根据实际需求进行调整，使得图片处理效果更加符合预期。