uniapp 动态设置图片的颜色

在uniapp中，可以使用`<image>`标签来展示图片，如果需要动态设置图片的颜色，可以通过以下方式实现：

1. 通过`style`属性设置`filter`属性来改变图片颜色

<image :src="imageUrl" style="filter: grayscale(100%) brightness(200%)"></image>

2. 使用`<canvas>`标签将图片绘制到画布上，然后通过`getImageData`和`putImageData`来改变颜色

<template>
  <canvas id="myCanvas" width="200" height="200"></canvas>
</template>

<script>
export default {
  data() {
    return {
      imageUrl: 'https://example.com/image.png'
    }
  },
  mounted() {
    const canvas = this.$refs.canvas
    const ctx = canvas.getContext('2d')
    const img = new Image()
    img.src = this.imageUrl
    img.onload = () => {
      ctx.drawImage(img, 0, 0)
      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)
      for (let i = 0; i < imageData.data.length; i += 4) {
        imageData.data[i] = 255 - imageData.data[i]
        imageData.data[i + 1] = 255 - imageData.data[i + 1]
        imageData.data[i + 2] = 255 - imageData.data[i + 2]
      }
      ctx.putImageData(imageData, 0, 0)
      this.imageUrl = canvas.toDataURL()
    }
  }
}
</script>

以上两种方式都可以实现动态改变图片颜色的效果，选择哪种方式取决于具体的需求和场景。