如何通过Vue实现图片的色彩调整和过滤？

<template>  <div>    <input type="file" @change="handleFileChange">    @@##@@    <div>      <label>Brightness</label>      <input type="range" min="-100" max="100" v-model="brightness" @input="applyFilter">    </div>    <div>      <label>Contrast</label>      <input type="range" min="-100" max="100" v-model="contrast" @input="applyFilter">    </div>  </div></template><script>export default {  data() {    return {      imageUrl: null,      brightness: 0,      contrast: 0,    };  },  methods: {    handleFileChange(event) {      const file = event.target.files[0];      this.imageUrl = URL.createObjectURL(file);    },    applyFilter() {      const imageElement = this.$refs.image;      imageElement.style.filter = `brightness(${this.brightness}%) contrast(${this.contrast}%)`;    },  },};</script>

<template>  <div>    <h1>图片处理</h1>    <image-filter></image-filter>  </div></template><script>import ImageFilter from './components/ImageFilter.vue';export default {  components: {    ImageFilter,  },};</script>