如何快速将原始像素数据转换为Base64格式图片？

针对你用Sharp转换慢的问题，给你几个实际可行的提速方案：

1. 优化Sharp本身的配置（最快见效） #

你的代码里最大的性能瓶颈是webp({ quality: 100 })——100%质量对应的是无损WebP压缩，计算量极大，哪怕把质量降到95（有损但视觉无差异），速度能提升好几倍。另外你代码里的replace操作完全多余（生成的是webp的base64，却去替换png的前缀），直接删掉。

优化后的代码：

const flatPixels = new Uint8Array(data.flat()); // 先把二维像素数组转成TypedArray，比直接用Buffer.from更高效
sharp(flatPixels, {
  raw: {
    width: displayWidth,
    height: displayHeight,
    channels: 1,
  },
})
.webp({ quality: 95 }) // 换成有损高画质，速度飙升
.toBuffer()
.then((data) => {
  const base64 = `data:image/webp;base64,${data.toString("base64")}`;
  scanImageStore.setImage(base64);
  console.timeEnd(`image-${id}`);
});

如果必须保留无损压缩，试试给Sharp加effort: 1参数（降低压缩耗时，代价是文件稍大）：

.webp({ lossless: true, effort: 1 })

2. 浏览器环境用Canvas API（硬件加速，速度最快） #

如果是在浏览器里处理，直接用Canvas绘制像素再导出WebP，利用GPU加速，比Sharp快一个数量级：

function convertPixelsToWebP(pixelMatrix, width, height) {
  const canvas = document.createElement('canvas');
  canvas.width = width;
  canvas.height = height;
  const ctx = canvas.getContext('2d');
  const imgData = ctx.createImageData(width, height);
  const flatPixels = pixelMatrix.flat();

  // 把单通道灰度值转成RGBA（Canvas只支持RGBA）
  for (let i = 0; i < flatPixels.length; i++) {
    const val = flatPixels[i];
    imgData.data[i * 4] = val;     // R
    imgData.data[i * 4 + 1] = val; // G
    imgData.data[i * 4 + 2] = val; // B
    imgData.data[i * 4 + 3] = 255; // Alpha（不透明）
  }

  ctx.putImageData(imgData, 0, 0);
  // 导出WebP，第二个参数是质量（0-1）
  return canvas.toDataURL('image/webp', 0.95);
}

// 使用示例
const base64 = convertPixelsToWebP(yourPixelMatrix, displayWidth, displayHeight);
scanImageStore.setImage(base64);

3. 缓存重复的像素矩阵 #

如果短时间内会重复转换相同的像素数据，直接缓存生成的Base64字符串，避免重复计算：

const pixelCache = new Map();

function getCachedBase64(pixelMatrix, width, height) {
  // 把像素矩阵转成字符串当键（或者用更高效的哈希算法）
  const cacheKey = JSON.stringify(pixelMatrix);
  if (pixelCache.has(cacheKey)) {
    return Promise.resolve(pixelCache.get(cacheKey));
  }

  // 这里用上面优化后的Sharp或Canvas代码生成base64
  return sharp(flatPixels, { raw: { width, height, channels:1 } })
    .webp({ quality:95 })
    .toBuffer()
    .then(data => {
      const base64 = `data:image/webp;base64,${data.toString("base64")}`;
      pixelCache.set(cacheKey, base64);
      return base64;
    });
}

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