在微信小程序中获取图片主要颜色的rgb
一个应用在微信小程序中提取图片主要颜色的工具库。
用法在wxml中添加canvas标签
<canvas canvas-id='img-canvas'></canvas>
相应的js文件中引入库
const utils = require('utils.js').utils;
在合适的状态里（如onLoad、onReady等）调用colors方法
const imagePath = "example-image.jpg";
const canvasId = "img-canvas";
utils.colors(imagePath, canvasId, {
success : function (res) {
console.log("dominant: " + res.dominant);
console.log("secondary: " + res.secondary);
console.log("palette: " + res.palette);
const fontColor = utils.isLight(res.dominant) ? "#000000" : "#ffffff";//根据主要颜色设置字体颜色
const bgColor = utils.rgbToHex(res.dominant);
console.log("bgColor: " + bgColor);
//设置导航栏背景色及标题颜色
wx.setNavigationBarColor({
frontColor : fontColor,
backgroundColor : bgColor,
animation : {
duration : 400,
timingFunc : 'easeIn'
}
})
},
width: 375,
height: 280
});
配置项
imagePath
Type: string
图片地址
canvasId
Type: string
canvas标签Id
options
success: 获取颜色成功后的回调
width: canvas宽
height: canvas高
常规Web开发中，可通过getImageData获取像素数据。
但小程序中只能通过的wx.canvasGetImageData获取图片像素数据。
canvas加载图片并无类似onload等事件通知加载完毕，所以此处采用了轮询方式（轮询条件还需进一步验证）检查加载完毕。
RGBaster
只是做了适合微信小程序使用的改造
版权声明：
1、该文章(资料)来源于互联网公开信息，我方只是对该内容做点评，所分享的下载地址为原作者公开地址。2、网站不提供资料下载，如需下载请到原作者页面进行下载。
