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

摘要

这是一款图分析图片配色方案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 = thiswx.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 = thisthat.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.widthlet height = imgInfo.heightlet imgPath = imgInfo.pathlet 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;
}

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

程序员不易，来个鼓励师

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

微信小程序使用wxParse，解决图片显示路径问题
微信小程序使用wxParse,解决图片显示路径问题参考文章: (1)微信小程序使用wxParse,解决图片显示路径问题 (2)https://www.cnblogs.com/zxf100/p/100 ...
imagepreview使用案例_微信小程序wx.previewImage预览图片实例详解
一.小知识二.例子 1.wxml 2.wxss .container { box-sizing:border-box; padding:20px; } .previewimg{ float:left ...
微信小程序长按图片不出现菜单_微信小程序实现长按删除图片的示例
说明最近在学小程序,遇到长按图片删除的问题,特此记录,记录自己的成长轨迹需求: 长按删除指定图片需要解决的问题长按事件如何表示出来? 如何获取当前长按元素的下标? 如何删除元素? 解决办法长 ...
微信小程序使用image组件显示图片的方法
本文实例讲述了微信小程序使用image组件显示图片的方法.分享给大家供大家参考,具体如下: 1.效果展示 2.关键代码 ① index.wxml 代码如下: <image style=" ...
微信小程序，动态改变背景图片
前言,作为开发新人,最近在学习微信小程序,期间遇到不少问题,对问题的解决的方法进行记录,以供学习之用. 关于微信小程序的背景图片问题, 1.微信小程序不能使用本地的图片设置背景图片,即 <vie ...
微信小程序：想要点击图片时进行一个放大的功能，写完之后可以正常显示，但点击时图片加载不出来，在此想问一下各路大神有没有解决办法
微信小程序:想要点击图片时进行一个放大的功能,写完之后可以正常显示,但点击时图片加载不出来,在此想问一下各路大神有没有解决办法 wxml: 在这里插入代码片 <view class='zhanp ...
微信小程序使用image组件时图片不显示的一个解决方法
第一次写博客: 图片链接可正常访问,但是使用组件时,图片不显示,偶然之间尝试到了一种解决方法,我使用的是微信小程序云端,读取本地图片时使用了具体的路径,错误用法如下如果按照指示\ 一级一级选下来,导 ...
微信小程序封装懒加载图片
微信小程序封装懒加载图片 js /components/LazyImage/index.js // components/LazyImage/index.js Component({/*** 组件的属 ...
微信小程序iPhoneX 底部虚拟Home键区域适配方案
微信小程序iPhoneX 底部虚拟Home键区域适配方案为什么要适配? 先看下iPhoneX和之前的iPhone的区别,如下图可以看出主要是顶部和底部多了一些区域,如果页面内容进入该区域,有可能会 ...
微信小程序调用python分析图片_小帅丶干货之图像识别在微信小程序展示
第一步肯定是去http://ai.baidu.com 注册账号,登陆并注册创建应用. http://ai.baidu.com/docs#/Begin/top 具体操作就看百度给出的文档即可很详细的哦. ...

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

摘要

效果

体验

代码

程序员不易，来个鼓励师

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

最新文章

热门文章