# tui-color-analysis 颜色分析器 开源组件
介绍
color analysis，图片颜色分析，传入图片获取图片主颜色。
# 引入
请自行将js文件复制进项目中，并确保路径正确
//根据实际路径引入
import ColorAnalysis from '../../../components/common/tui-color-analysis/tui-color-analysis.js';
# 代码演示
部分功能演示，具体可参考示例程序以及文档API。
<template>
<view class="container">
<view class="tui-canvas-box" @tap="chooseImg">
<text v-if="!imgUrl">+ 点击选择图片</text>
<image v-if="imgUrl" :src="imgUrl" class="tui-image" mode="aspectFit"></image>
</view>
<canvas id="tui-color-palette" canvas-id="tui-color-palette" class="tui-palette-canvas"
:style="{width:canvasWidth+'px',height:canvasHeight+'px'}"></canvas>
</view>
</template>
// data 数据 及 方法
import ColorAnalysis from '@/components/common/tui-color-analysis/tui-color-analysis.js';
export default {
data() {
return {
canvasWidth: 200,
canvasHeight: 200,
colorAnalysis: null,
winWidth: 375,
maxColors: 5,
colors: [],
rbgColors: []
}
},
onReady() {
//tui-color-palette 为canvas-id
this.colorAnalysis = new ColorAnalysis('tui-color-palette');
this.winWidth = uni.getSystemInfoSync().windowWidth;
},
methods: {
chooseImg: function() {
uni.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: res => {
this.imgUrl = res.tempFilePaths[0]
uni.getImageInfo({
src: res.tempFilePaths[0],
success: imgInfo => {
let {
width,
height
} = imgInfo;
let scale = (0.6 * this.winWidth) / Math.max(width, height);
let canvasWidth = Math.floor(scale * width);
let canvasHeight = Math.floor(scale * height);
this.canvasWidth = canvasWidth;
this.canvasHeight = canvasHeight;
this.colorAnalysis.getPalette({
width: canvasWidth,
height: canvasHeight,
imgPath: res.tempFilePaths[0],
maxColors: this.maxColors,
step: 1
},
colorArr => {
if (colorArr) {
let rbgColors = [];
colorArr = colorArr.map(color => {
rbgColors.push(
`${color[0]},${color[1]},${color[2]}`
);
return util.rgbToHex(color[0],
color[1], color[2]);
});
console.log(colorArr, rbgColors);
this.colors = colorArr;
this.rbgColors = rbgColors;
}
}
);
}
});
}
});
}
}
}
/* 样式 */
.tui-canvas-box {
width: 600rpx;
height: 600rpx;
padding: 0 30rpx;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
background-color: #fff;
margin: 0 auto;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.tui-image {
max-width: 600rpx;
max-height: 600rpx;
display: block;
}
.tui-canvas-box text {
color: #999;
}
.tui-palette-canvas {
position: fixed;
z-index: 10;
left: -2000px;
top: -2000px;
pointer-events: none;
}
<view class="container">
<view class="tui-canvas-box" bindtap="chooseImg">
<text wx:if="{{!imgUrl}}">+ 点击选择图片</text>
<image wx:if="{{imgUrl}}" src="{{imgUrl}}" class="tui-image" mode="aspectFit"></image>
</view>
<canvas id="tui-color-palette" canvas-id="tui-color-palette" class="tui-palette-canvas" style="width{{canvasWidth}}px;height:{{canvasHeight}}px"></canvas>
</view>
// data 数据 及 方法
import ColorAnalysis from '../../../components/common/tui-color-analysis/tui-color-analysis.js'
Page({
data: {
imgUrl: "",
canvasWidth: 200,
canvasHeight: 200,
colorAnalysis: null,
winWidth: 375,
maxColors:5,
colors: [],
rbgColors:[]
},
onReady: function () {
//tui-color-palette 为canvas-id
this.data.colorAnalysis = new ColorAnalysis('tui-color-palette');
this.data.winWidth = wx.getSystemInfoSync().windowWidth;
},
chooseImg: function () {
wx.chooseImage({
count: 1,
sizeType: ['original', 'compressed'],
sourceType: ['album', 'camera'],
success: (res) => {
this.setData({
imgUrl: res.tempFilePaths[0]
})
wx.getImageInfo({
src: res.tempFilePaths[0],
success: (imgInfo) => {
let {
width,
height
} = imgInfo;
let scale = 0.6 * this.data.winWidth / Math.max(width, height);
let canvasWidth = Math.floor(scale * width);
let canvasHeight = Math.floor(scale * height);
this.setData({
canvasWidth: canvasWidth,
canvasHeight: canvasHeight
});
this.data.colorAnalysis.getPalette({
width: canvasWidth,
height: canvasHeight,
imgPath: res.tempFilePaths[0],
maxColors: this.data.maxColors,
step: 1
}, (colorArr) => {
if (colorArr) {
let rbgColors=[]
colorArr = colorArr.map((color) => {
rbgColors.push(`${color[0]},${color[1]},${color[2]}`)
return util.rgbToHex(color[0], color[1], color[2])
})
console.log(colorArr,rbgColors)
this.setData({
colors: colorArr,
rbgColors:rbgColors
})
}
});
}
})
}
})
}
})
/* 样式 */
.tui-canvas-box {
width: 600rpx;
height: 600rpx;
padding: 0 30rpx;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: center;
background-color: #fff;
margin: 0 auto;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.tui-image {
max-width: 600rpx;
max-height: 600rpx;
display: block;
}
.tui-canvas-box text {
color: #999;
}
.tui-palette-canvas {
position: fixed;
z-index: 10;
left: -2000px;
top: -2000px;
pointer-events: none;
}
// Make sure to add code blocks to your code group
TIP
使用此功能，需自行在页面加入 canvas 组件，并设置canvas-id值与方法初始化传入的一致。
# Methods
| 方法名 | 说明 | 传入参数 |
|---|---|---|
| getPalette | 获取主要色调 | {width:width,height...}，callback |
getPalette方法传入参数说明
{ } ：类型 Object，各参数说明：width 画布宽度，height 画布高度，imgPath 图片路径，maxColors 最大颜色数 。
callback ：回调函数，返回颜色信息。
# 预览
# 特别说明
# 线上程序扫码预览
 |  |  |
|---|---|---|
| ThorUI组件库小程序码 | H5二维码 | ThorUI示例小程序码 |