如何在Vue中实现图片的黑白处理？

<template>
  <div class="container">
    <img :src="originalImage" class="original" @load="convertToBlackAndWhite">
    <img :src="blackAndWhiteImage" class="black-and-white" v-show="blackAndWhite">
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      originalImage: 'images/pic.jpg',
      blackAndWhiteImage: '',
      blackAndWhite: false
    };
  },
  methods: {
    convertToBlackAndWhite() {
      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;
        if (brightness > 128) {
          data[i] = 255;
          data[i + 1] = 255;
          data[i + 2] = 255;
        } else {
          data[i] = 0;
          data[i + 1] = 0;
          data[i + 2] = 0;
        }
      }
      ctx.putImageData(imageData, 0, 0);
      this.blackAndWhiteImage = canvas.toDataURL();
      this.blackAndWhite = true;
    }
  }
};
</script>
 
<style scoped>
.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
}
 
.original, .black-and-white {
  max-width: 300px;
}
 
.black-and-white {
  display: none;
}
</style>