如何通过Vue实现图片的曝光和高光处理？

<template>  <div>    <input type="file" @change="onFileChange" />    <canvas ref="canvas"></canvas>  </div></template><script>export default {  data() {    return {      imageSrc: null,      image: null    };  },  methods: {    onFileChange(event) {      const file = event.target.files[0];      this.imageSrc = URL.createObjectURL(file);    },    loadImage() {      this.image = new Image();      this.image.src = this.imageSrc;      this.image.onload = () => {        this.drawImage();      };    },    drawImage() {      const canvas = this.$refs.canvas;      const context = canvas.getContext("2d");      context.drawImage(this.image, 0, 0, canvas.width, canvas.height);    }  },  watch: {    imageSrc() {      this.loadImage();    }  }};</script>

function adjustBrightness(imageData, brightness) {  const data = imageData.data;  for (let i = 0; i < data.length; i += 4) {    data[i] += brightness;    data[i + 1] += brightness;    data[i + 2] += brightness;  }  return imageData;}function adjustHighlights(imageData, highlights) {  const data = imageData.data;  for (let i = 0; i < data.length; i += 4) {    const r = data[i];    const g = data[i + 1];    const b = data[i + 2];    const max = Math.max(r, g, b);    const delta = max * (highlights / 100);    if (r === max) {      data[i] += delta;    }    if (g === max) {      data[i + 1] += delta;    }    if (b === max) {      data[i + 2] += delta;    }  }  return imageData;}

<template>  <div>    <!-- 省略部分代码 -->    <button @click="exposure">曝光处理</button>    <button @click="highlights">高光处理</button>  </div></template><script>export default {  // 省略部分代码  methods: {    // 省略部分代码    exposure() {      const canvas = this.$refs.canvas;      const context = canvas.getContext("2d");      const imageData = context.getImageData(0, 0, canvas.width, canvas.height);      const adjustedData = adjustBrightness(imageData, 50);      context.putImageData(adjustedData, 0, 0);    },    highlights() {      const canvas = this.$refs.canvas;      const context = canvas.getContext("2d");      const imageData = context.getImageData(0, 0, canvas.width, canvas.height);      const adjustedData = adjustHighlights(imageData, 25);      context.putImageData(adjustedData, 0, 0);    }  }};</script>