当前位置：首页 > news >正文

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

news 来源：原创 2025/5/4 17:11:38

效果图

请添加图片描述
取得是图片中间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 = thisconst 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 = thiswx.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].nodeconst ctx = canvas.getContext('2d')canvas.width = widthcanvas.height = heightconst image = canvas.createImage()image.src = srcimage.onload = () => {ctx.drawImage(image,0,0,width,height)const x = (width - 10) / 2 | 0,y = (height - 10) / 2 | 0const 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，很少看博客，对你有帮助别忘记点赞收藏。