Vue中如何实现图片的透明度和亮度调节？

<template>  <div>    <input type="range" v-model="opacity" min="0" max="1" step="0.1">    <img :  style="max-width:90%" src="your-image-path.jpg" alt="Image">  </div></template><script>export default {  data() {    return {      opacity: 1 // 初始透明度为1    };  }};</script>

<template>  <div>    <input type="range" v-model="brightness" min="-100" max="100" step="10">    <canvas ref="canvas"></canvas>  </div></template><script>export default {  data() {    return {      brightness: 0 // 初始亮度为0    };  },  mounted() {    this.adjustBrightness(); // 初始化图片亮度  },  methods: {    adjustBrightness() {      const canvas = this.$refs.canvas;      const ctx = canvas.getContext('2d');      const img = new Image();      img.src = 'your-image-path.jpg';      img.onload = () => {        canvas.width = img.width;        canvas.height = img.height;        ctx.drawImage(img, 0, 0, img.width, img.height);        const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);        const data = imageData.data;        for (let i = 0; i < data.length; i += 4) {          // 计算新的亮度值          const brightness = this.brightness / 100;          const newData = [            data[i] + 255 * brightness,            data[i + 1] + 255 * brightness,            data[i + 2] + 255 * brightness,            data[i + 3]          ];          // 更新像素的RGB值          for (let j = 0; j < 4; j++) {            data[i + j] = newData[j];          }        }        ctx.putImageData(imageData, 0, 0);      };    }  },  watch: {    brightness() {      this.adjustBrightness(); // 亮度值改变时重新调整亮度    }  }};</script>