如何用JS异步函数生成全RGB十六进制色值并通过Jimp生成PNG

原singleHex函数的问题 #

你的singleHex存在几个关键问题导致无法正常工作：

• 变量引用错误：直接使用index而非num.index，属于未定义变量
• 字符串不可修改：JavaScript字符串是不可变类型，直接通过下标修改num.hex的字符无效
• 进位逻辑缺陷：仅处理单次进位，未考虑连续进位场景（比如0000FF应进位到000100）
• 结束返回不规范：生成FFFFFF时仅打印日志，未返回明确的终止标记

修正后的色值生成函数 #

以下是修复后的singleHex，可正确从000000递进到FFFFFF：

function singleHex(num) {
  const val = ['0','1','2','3','4','5','6','7','8','9','A','B','C','D','E','F'];
  // 将hex字符串转为数组，方便修改
  let hexArr = num.hex.split('');
  let currentIndex = num.index;

  // 当前位不是F，直接递增
  if (hexArr[currentIndex] !== 'F') {
    const currentValIndex = val.indexOf(hexArr[currentIndex]);
    num.valIndex = currentValIndex + 1;
    hexArr[currentIndex] = val[num.valIndex];
    num.hex = hexArr.join('');
    return num;
  }

  // 当前位是F，处理连续进位
  while (currentIndex >= 0 && hexArr[currentIndex] === 'F') {
    hexArr[currentIndex] = '0';
    currentIndex--;
  }

  // 所有位都是F，即已到FFFFFF，返回终止标记
  if (currentIndex < 0) {
    return { done: true };
  }

  // 进位到前一位并递增
  const prevValIndex = val.indexOf(hexArr[currentIndex]);
  hexArr[currentIndex] = val[prevValIndex + 1];
  num.hex = hexArr.join('');
  num.index = 5; // 重置索引到最后一位，下次从末尾开始递增
  num.valIndex = 0;
  return num;
}

结合Jimp批量生成PNG #

使用Jimp创建64×64的纯色图片，同时通过p-limit控制并发数，避免内存溢出：

步骤1：安装依赖 #

npm install jimp p-limit

步骤2：完整批量生成代码 #

const Jimp = require('jimp');
const pLimit = require('p-limit');
const fs = require('fs');
const path = require('path');

// 创建输出目录，不存在则自动创建
const outputDir = './rgb-colors';
if (!fs.existsSync(outputDir)) {
  fs.mkdirSync(outputDir, { recursive: true });
}

// 限制并发数，根据机器性能调整，建议10-50
const limit = pLimit(20);

// 初始化色值状态
let colorState = {
  hex: '000000',
  index: 5,
  valIndex: 0
};

// 生成单张纯色图片的函数
async function generateColorImage(hex) {
  try {
    // 创建64x64的图片，填充指定hex颜色
    const image = await Jimp.create(64, 64, `#${hex}`);
    // 保存文件，文件名用小写hex值
    await image.writeAsync(path.join(outputDir, `${hex.toLowerCase()}.png`));
    console.log(`已生成：${hex}.png`);
  } catch (err) {
    console.error(`生成${hex}失败：`, err);
  }
}

// 批量生成主逻辑
async function batchGenerate() {
  while (true) {
    // 获取下一个色值
    colorState = singleHex(colorState);
    // 检查是否已完成所有色值
    if (colorState.done) {
      console.log('所有RGB颜色PNG已生成完成！');
      break;
    }
    // 加入并发队列执行
    await limit(() => generateColorImage(colorState.hex));
  }
}

// 启动生成任务
batchGenerate();

注意事项 #

• 磁盘空间：16777216张64×64的PNG总占用空间约10-15GB，请确保磁盘有足够剩余空间
• 性能调整：根据CPU和磁盘IO能力修改p-limit的并发数，过高会导致内存占用过高或写入卡顿
• 文件名规范：统一用小写hex值命名，避免大小写不一致导致的文件重复或查找问题

内容的提问来源于stack exchange，提问作者leguchi