微信小程序根据图片生成背景颜色有效果图

效果图

取得是图片中间10个像素算出背景颜色

.wxml

复制代码

<canvas type="2d" id="imageCanvas" style="--w: {{w}}px;--h: {{h}}px;" />
<view style="background: {{backgroundColor}};">
  <image bind:tap="updateIndex" data-index="{{index}}" wx:for="{{image}}" 
  wx:key="index" src="{{item}}" mode="aspectFill" style="{{select === index?'border:2px solid red;':''}}" />
</view>

.wxss

复制代码

canvas{
  visibility: hidden;
  position: absolute;
  z-index: -1;
  width: var(--w);
  height: var(--h);
  left: var(--w);
  top: calc(var(--w) * -1);
}
view{
  height: 100vh;
  text-align: center;
  transition: all 0.5s;
}
image{
  width:300rpx;
  height:300rpx;
  margin: 30rpx 30rpx 0;
  box-sizing: border-box;
}

.js

复制代码

Page({
  data:{
    w:0,
    h:0,
    image:[
      'https://c-ssl.dtstatic.com/uploads/blog/202402/27/1mS1Nve5iQqnQpN.thumb.400_0.jpg',
      'https://c-ssl.dtstatic.com/uploads/blog/202402/23/aLS3821yt0BE1yW.thumb.400_0.jpeg',
      'https://c-ssl.dtstatic.com/uploads/blog/202402/25/lGSgwXVEhxOzbqx.thumb.400_0.jpeg',
      'https://c-ssl.dtstatic.com/uploads/blog/202402/27/lGS1anBpixO7xG3.thumb.400_0.jpg',
    ],
    select:0
  },
  onLoad(options) {
    this.getColor()
  },
  updateIndex(e){
    this.setData({
      select:e.currentTarget.dataset.index
    })
    this.getColor()
  },
  getColor(){
    var that = this
    const src = that.data.image[that.data.select]
    that.getImageData(src, pixels => {
      const mainColor = that.MainColor(pixels);
      that.setData({
        backgroundColor: `rgb(${mainColor[0]}, ${mainColor[1]}, ${mainColor[2]})`,
      });
    });
  },
  getImageData(src, fn) {
    var that = this
    wx.getImageInfo({
      src,
      success(res) {
        const { width, height } = res;
        that.setData({
          w:width,
          h:height
        })
        wx.createSelectorQuery().select('#imageCanvas').fields({ node: true, size: true }).exec((rect) => {
          const canvas = rect[0].node
          const ctx = canvas.getContext('2d')
          canvas.width = width
          canvas.height = height
          const image = canvas.createImage()
          image.src = src
          image.onload = () => {
            ctx.drawImage(image,0,0,width,height)
            const x = (width - 10) / 2 | 0,y = (height - 10) / 2 | 0
            const o = ctx.getImageData(x, y, 10, 10)
            fn(o.data);
          };
        })
      },
    });
  },
  MainColor(pixels) {
    const colorFrequency = {};
    for (let i = 0; i < pixels.length; i += 4) {
      const red = pixels[i];
      const green = pixels[i + 1];
      const blue = pixels[i + 2];
      const key = `${red},${green},${blue}`;
      if (!colorFrequency[key]) {
        colorFrequency[key] = 0;
      }
      colorFrequency[key]++;
    }
    let mainColor = '';
    let maxCount = 0;
    Object.keys(colorFrequency).forEach(key => {
      if (colorFrequency[key] > maxCount) {
        maxCount = colorFrequency[key];
        mainColor = key.split(',').map(Number);
      }
    });
    return mainColor;
  },
})

遇到问题可以看我主页加我Q，很少看博客，对你有帮助别忘记点赞收藏。