前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >微信小程序—图片色彩分析(拾取图片的配色方案)「建议收藏」

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

作者头像
全栈程序员站长
发布2022-09-07 11:23:50
1.4K0
发布2022-09-07 11:23:50
举报
文章被收录于专栏:全栈程序员必看

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

摘要

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

效果

在这里插入图片描述
在这里插入图片描述

体验

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

在这里插入图片描述
在这里插入图片描述

代码

js

代码语言:javascript
复制
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

代码语言:javascript
复制
<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

代码语言:javascript
复制
.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;
}

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

程序员不易,来个鼓励师

在这里插入图片描述
在这里插入图片描述

发布者:全栈程序员栈长,转载请注明出处:https://javaforall.cn/148113.html原文链接:https://javaforall.cn

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 摘要
  • 效果
  • 体验
  • 代码
  • 程序员不易,来个鼓励师
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档