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

效果图


取得是图片中间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,很少看博客,对你有帮助别忘记点赞收藏。

相关推荐
996幸存者3 小时前
uni-app区域选择、支持静态、动态数据
微信小程序·uni-app
ᥬ 小月亮5 小时前
Uniapp编写微信小程序,绘制动态圆环进度条
微信小程序·小程序·uni-app
The_era_achievs_hero12 小时前
UniappDay03
vue.js·微信小程序·uni-app
Python大数据分析1 天前
uniapp之微信小程序标题对其右上角按钮胶囊
微信小程序·小程序·uni-app
The_era_achievs_hero2 天前
uni-appDay02
javascript·vue.js·微信小程序·uni-app
黑马源码库miui520863 天前
JAVA图文短视频交友+自营商城系统源码支持小程序+Android+IOS+H5
java·微信小程序·小程序·uni-app·音视频·交友
郭邯3 天前
小程序视图层学习笔记
微信小程序
拾光拾趣录4 天前
小程序双线程架构:为什么需要两个线程才能跳舞?
前端·微信小程序
源码_V_saaskw5 天前
JAVA国际版任务悬赏+接单系统源码支持IOS+Android+H5
android·java·开发语言·javascript·微信小程序
JIngJaneIL6 天前
跑腿小程序|基于微信小程序的跑腿平台小程序设计与实现(源码+数据库+文档)
java·数据库·微信小程序·小程序·论文·毕设·跑腿小程序