使用html2canvas生成的图片亮度偏低，如何调整对比度或优化画质？

针对你遇到的html2canvas生成图片亮度不足、CSS filter不被支持的问题，可通过以下几种方案解决：

方案1：手动处理Canvas像素提升亮度/对比度 #

直接操作canvas的像素数据，手动调整每个像素的RGB值来替代CSS filter的效果，这是最直接的解决方式：

html2canvas($("#downloadArea")[0], {
  scale: 2,
}).then((canvas) => {
  // 获取画布上下文和像素数据
  const ctx = canvas.getContext('2d');
  const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
  const data = imageData.data;

  // 亮度系数：1为原亮度，大于1提亮，小于1变暗
  const brightness = 1.2;
  // 对比度系数：1为原对比度，大于1提高，小于1降低
  const contrast = 1.1;

  // 遍历所有像素，计算调整后的RGB值
  for (let i = 0; i < data.length; i += 4) {
    // 分别处理R、G、B通道，A通道保持不变
    data[i] = Math.min(255, Math.max(0, (data[i] - 127.5) * contrast + 127.5 * brightness));
    data[i + 1] = Math.min(255, Math.max(0, (data[i + 1] - 127.5) * contrast + 127.5 * brightness));
    data[i + 2] = Math.min(255, Math.max(0, (data[i + 2] - 127.5) * contrast + 127.5 * brightness));
  }

  // 将处理后的像素数据放回画布
  ctx.putImageData(imageData, 0, 0);

  // 生成下载链接，可调整JPEG质量（0-1）
  const imgData = canvas.toDataURL("image/jpeg", 0.9);
  const a = document.createElement("a");
  a.href = imgData.replace("image/jpeg", "image/octet-stream");
  a.download = "Download.jpg";
  a.click();
});

方案2：改用PNG格式导出 #

JPEG的压缩算法会损失部分色彩信息，可能加剧亮度偏差，换成PNG格式能保留更准确的原始色彩：

html2canvas($("#downloadArea")[0], {
  scale: 2,
}).then((canvas) => {
  const imgData = canvas.toDataURL("image/png");
  const a = document.createElement("a");
  a.href = imgData.replace("image/png", "image/octet-stream");
  a.download = "Download.png";
  a.click();
});

方案3：升级html2canvas版本 #

部分旧版本的html2canvas存在色彩渲染bug，升级到最新稳定版，可能直接解决亮度偏差问题。

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