Vue中如何实现图片的饱和度和对比度调节？

npm install vue-image-lightbox --savenpm install vue-range-slider --save

<template>  <div>    <image-lightbox v-bind:images="images" @on-close="close"></image-lightbox>    <range-slider :value="saturation" @input="changeSaturation"></range-slider>    <range-slider :value="contrast" @input="changeContrast"></range-slider>  </div></template><script>import ImageLightbox from 'vue-image-lightbox'import RangeSlider from 'vue-range-slider'export default {  components: {    ImageLightbox,    RangeSlider  },  data() {    return {      images: ['path/to/image.jpg'], // 需要展示的图片路径      saturation: 100, // 饱和度的初始值      contrast: 100 // 对比度的初始值    }  },  methods: {    close() {      // 关闭图片编辑窗口的方法    },    changeSaturation(value) {      // 改变饱和度的方法    },    changeContrast(value) {      // 改变对比度的方法    }  }}</script><style>/* 在这里添加样式 */</style>

changeSaturation(value) {  this.saturation = value  this.updateFilter()},changeContrast(value) {  this.contrast = value  this.updateFilter()},updateFilter() {  const filter = `saturate(${this.saturation}%) contrast(${this.contrast}%)`  document.querySelector('.image-lightbox img').style.filter = filter}