Mockjs随机生成浅色图片 | 十六进制颜色码调色大法

你是否遇到过这样的问题？

项目的主色调是浅色，使用mockjs随机生成的图片却是五彩斑斓的鲜艳色调，导致项目演示的时候特别 违和 呢？

结果mockjs的图片亮瞎了我的眼，虽然颜色很好看，但是 不和谐 啊 > <~~

为了在期末答辩场上“一展雄风”，在我一番研究之后，终于搞出了mockjs生成浅色图片的方案。

请看效果：

十六进制颜色码原理

要想做出心仪的调调，首先要知道十六进制颜色码(#eeeeee)的原理。

十六进制颜色码由 ‘#’和3个16进制数相连组成。

我们知道，任何颜色都能通过红绿蓝三基色通过特定的比例调和而成。

而十六进制颜色码的3个十六进制数，则分别对应红的强度、绿的强度、蓝的强度。

实践

（演示使用十进制）

根据上面的法则，我们可以推出，如果想要一组红色调的图片，就应该让第一个十六进制数的值大于其他两个数的值。

我们可以设置为： # （150~200）（70-110）（70-110）

mockjs演示效果：

假设我想要一组浅色蓝绿调的图，则让绿和蓝的强度足够大、相差不多，并且大于红色的强度即可。

例如：： # （110~170）（200-225）（200-225）

mockjs演示效果：

如果仅仅是想要一组浅色的图，并且颜色跨度要足够多，则应该让三个色的强度都足够大（比如都大于100），并且随机数字的分布区间要大。

例如：# （180-225）（140-255）（120-255）

mockjs演示：

mockjs代码实现

Mock.mock('/api/data', (req, res) => {
  const data = []
  for (let i = 0; i < 16; i++) {
  	// 利用mockjs的Random随机生成数字并转成十六进制，拼接。
    const a = '#' + Random.integer(180, 255).toString(16) +
      Random.integer(140, 255).toString(16) +
      Random.integer(120, 220).toString(16)
    data.push({
      image: Random.image('140x140', a, ' IMAGE ')
    })
  }
  return data
})

心得感想

在研究出这个方法之前，我在网上都没搜到调节mockjs图片颜色的博客，说不定我这是全网第一篇教程呢（嘻嘻）。如果你觉得对你有帮助的话，不妨点个赞吧~~