async getRgba(imgs) {
    const hexColor = await this.getImageColor(imgs)
    var r = parseInt(hexColor.slice(1, 3), 16);
    var g = parseInt(hexColor.slice(3, 5), 16);
    var b = parseInt(hexColor.slice(5, 7), 16);
    
    // 构建渐变背景
    const startColor = `rgb(${r}, ${g}, ${b})`;
    const gradientBg = `linear-gradient(180deg, ${startColor} 0%, #F9F9F9 100%)`;
    
    this.setData({
        rgbaColor: gradientBg
    })
  },


  getImageColor(url) {
    return new Promise((resolve, reject) => {
      url = url.split('?')[0]
      wx.request({
        url: url + '?x-oss-process=image/average-hue',
        success: (res) => {
          if (res.statusCode === 200) {
            let color = res.data.RGB.replace(/0x/g, '#')
            resolve(color)
          } else {
            reject(res)
          }
        }
      })
    })
  },

我搭配用的是阿里云的云存储,也有可以第三方和canvas来提取,如果有需要我后续可以出示例

更多推荐