微信小程序—图片色彩分析（拾取图片的配色方案）「建议收藏」

大家好，又见面了，我是你们的朋友全栈君。

摘要

这是一款图分析图片配色方案demo，图片色彩分析或许可以应用在智能分析色彩领域，比如穿衣搭配、家装等设计或生活领域，但需要大量数据的支持，希望技术能够更好的被应用

效果

体验

体验途径：画布系列>色彩分析

代码

js

import ColorThief from '/utils/color-thief.js'
import { 

rgbToHex,
uuid,
colorsEqual,
saveBlendent
} from '/utils/util.js'
const app = getApp()
Page({ 

data: { 

colorThief: '',
imgPath: 'cloud://nopc.6e6f-norm6pc-1300924598/meinv/00010.jpg',
colors: [
],
imgInfo: { 
},
colorCount: 5,
screenWidth: 0
},
chooseImg: function () { 

var that = this
wx.chooseImage({ 

count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: (res) => { 

that.setData({ 

imgPath: res.tempFilePaths[0],
})
wx.getImageInfo({ 

src: 'that.data.imgPath',
success: function (imgInfo) { 

}
})
wx.getImageInfo({ 

src: that.data.imgPath,
success: (imgInfo) => { 

let { 

width,
height,
imgPath
} = imgInfo;
let scale = 0.8 * that.data.screenWidth / Math.max(width, height);
let canvasWidth = Math.floor(scale * width);
let canvasHeight = Math.floor(scale * height);
that.setData({ 

imgInfo,
canvasScale: scale,
canvasWidth,
canvasHeight
});
let quality = 1;
that.data.colorThief.getPalette({ 

width: canvasWidth,
height: canvasHeight,
imgPath: res.tempFilePaths[0],
colorCount: that.data.colorCount,
quality
}, (colors) => { 

if (colors) { 

colors = colors.map((color) => { 

return ('#' + rgbToHex(color[0], color[1], color[2]))
})
that.setData({ 

colors,
})
}
});
}
})
}
})
},
onLoad: function () { 

var that = this
that.data.colorThief = new ColorThief('imageHandler');
wx.getSystemInfo({ 

success: function (res) { 

that.setData({ 

screenWidth: res.windowWidth
})
wx.getImageInfo({ 

src: that.data.imgPath,
success: (imgInfo) => { 

let width = imgInfo.width
let height = imgInfo.height
let imgPath = imgInfo.path
let scale = 0.8 * that.data.screenWidth / Math.max(width, height);
let canvasWidth = Math.floor(scale * width);
let canvasHeight = Math.floor(scale * height);
that.setData({ 

imgInfo,
canvasScale: scale,
canvasWidth,
canvasHeight,
imgPath: imgPath
});
let quality = 1;
that.data.colorThief.getPalette({ 

width: canvasWidth,
height: canvasHeight,
imgPath: that.data.imgPath,
colorCount: that.data.colorCount,
quality
}, (colors) => { 

if (colors) { 

colors = colors.map((color) => { 

return ('#' + rgbToHex(color[0], color[1], color[2]))
})
that.setData({ 

colors,
})
}
});
}
})
},
})
}
})

wxml

<view class="container">
<canvas wx:if="{ 
{imgPath}}" id='image-handler' style='{ 
{"width:"+canvasWidth+"px;height:"+canvasHeight+"px;"}}' canvas-id="imageHandler" bindtap='chooseImg'></canvas>
<view class='colors-container' style='{ 
{"width:"+colors.length * 40 + "px;"}}'>
<view wx:for="{ 
{colors}}" wx:key="{ 
{item}}" class='color' style='{ 
{"background-color:"+item}};'></view>
</view>
<button bindtap="chooseImg" style="margin:20rpx">更换图片</button>
</view>

wxss

.colors-container { 

max-width: 80%;
height: 80px;
display: flex;
align-items: center;
justify-content: center;
margin-top: 40rpx;
box-shadow: 0 4px 12px rgba(0,0,0,.25);
border-radius: 6px;
overflow: hidden;
}
.colors-container .color { 

flex: 1;
max-width: 40px;
height: 100%;
}
#image-handler { 

box-shadow: 0 4px 12px rgba(0,0,0,.25);
border-radius: 6px;
margin-top: 40rpx;
}

所使用到的工具类免积分下载点击下载
所使用到的工具类免积分下载点击下载
所使用到的工具类免积分下载点击下载

程序员不易，来个鼓励师