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圖片顏色的博客，說不定我這是全網第一篇教程呢（嘻嘻）。若是你以爲對你有幫助的話，不妨點個贊吧~~