微信小程序的图片色彩分析,窃取主色调,调色板

1、在微信小程序中创建包管理器 package.json

npm init -y

2、安装 Mini App Color Thief 包

npm i --save miniapp-color-thief

3、构建 npm

4、wxml

html 复制代码
<canvas canvas-id="myCanvas"></canvas>
<button bindtap="chooseImage">chooseImage</button>
<view wx:for="{{ palette }}" wx:key="index">
  <view style="width:32px;height:32px;background-color: {{ item }}"></view>
  <text>{{ item }}</text>
</view>

5、js

javascript 复制代码
data: {
    palette: []
  },
  /*
  获取图片的色板
  colorThief(data).palette(count, quality).get(); // [[0,0,0],[0,0,0],[0,0,0]...]
    {Number} count 返回色板的颜色数量 ( 1 < count < 256 )
    {Number} quality 计算颜色的精度,默认为 10
  */
  chooseImage() {
    const ctx = wx.createCanvasContext('myCanvas')
    wx.chooseImage({
      count: 1,
      sizeType: ['original', 'compressed'],
      sourceType: ['album', 'camera'],
      success: res => {
        ctx.drawImage(res.tempFilePaths[0], 0, 0, 300, 150)
        ctx.draw(true, () => {
          wx.canvasGetImageData({
            canvasId: "myCanvas",
            x: 0,
            y: 0,
            width: 100,
            height: 100,
            success: res => {
              let palette = colorThief(res.data)
                .palette(3, 10)
                .getHex();
              this.setData({ palette })
            }
          });
        })
      }
    })
  },

6、结果

相关推荐
難釋懷6 小时前
微信小程序全局配置
微信小程序·小程序
Enti7c6 小时前
微信小程序核心知识点速览
微信小程序·小程序
2501_9159184119 小时前
Fiddler中文版全面评测:功能亮点、使用场景与中文网资源整合指南
android·ios·小程序·https·uni-app·iphone·webview
说私域20 小时前
从品牌附庸到自我表达:定制开发开源AI智能名片S2B2C商城小程序赋能下的营销变革
人工智能·小程序
難釋懷20 小时前
第一个小程序
小程序
春哥的研究所20 小时前
可视化DIY小程序工具!开源拖拽式源码系统,自由搭建,完整的源代码包分享
小程序·开源·开源拖拽式源码系统·开源拖拽式源码·开源拖拽式系统
weixin_lynhgworld20 小时前
盲盒一番赏小程序技术实现方案:高并发与防作弊的平衡之道
小程序
今日热点1 天前
小程序主体变更全攻略:流程、资料与异常处理方案
经验分享·微信·小程序·企业微信·微信公众平台·微信开放平台
鸭鸭梨吖1 天前
微信小程序---下拉框
微信小程序·小程序
CRMEB定制开发1 天前
CRMEB Pro版前端环境配置指南
前端·微信小程序·uni-app·商城源码·微信商城·crmeb