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演示：

说了这么多，来看看具体在代码中是怎么实现的吧~

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 '),
      productName: Random.ctitle(),
      productPrice: Random.float(10, 1000, 2, 3),
      productSell: Random.integer(100, 10000),
      isFreeShipping: Random.boolean()
    })
  }
  return data
})

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