微信小程序—图片色彩分析（拾取图片的配色方案）

最新推荐文章于 2025-02-05 17:19:10 发布

玩烂小程序

最新推荐文章于 2025-02-05 17:19:10 发布

阅读量6.4k

点赞数 4

分类专栏：微信小程序 demo 文章标签：小程序 js javascript

本文链接：https://blog.csdn.net/WeiHan_Seven/article/details/103872499

版权

微信小程序同时被 2 个专栏收录

51 篇文章

订阅专栏

demo

19 篇文章

订阅专栏

摘要

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

效果

在这里插入图片描述

体验

体验途径：画布系列>色彩分析
在这里插入图片描述

代码

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;
}