如何在Vue中实现图片的灰度处理？

<template>
  <div class="container">
    <img :src="originalImage" class="original" @load="convertToGrayscale">
    <img :src="grayscaleImage" class="grayscale" v-show="grayscale">
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      originalImage: '/images/pic.jpg',
      grayscaleImage: '',
      grayscale: false
    };
  },
  methods: {
    convertToGrayscale() {
      let canvas = document.createElement('canvas');
      let ctx = canvas.getContext('2d');
      let img = document.querySelector('.original');
      canvas.width = img.width;
      canvas.height = img.height;
      ctx.drawImage(img, 0, 0);
      let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
      let data = imageData.data;
      for (let i = 0; i < data.length; i += 4) {
        let brightness = (data[i] + data[i + 1] + data[i + 2]) / 3;
        data[i] = brightness;
        data[i + 1] = brightness;
        data[i + 2] = brightness;
      }
      ctx.putImageData(imageData, 0, 0);
      this.grayscaleImage = canvas.toDataURL();
      this.grayscale = true;
    }
  }
};
</script>
 
<style scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
 
.original, .grayscale {
  max-width: 300px;
}
 
.grayscale {
  display: none;
}
</style>