React中解决qrcode.react生成二维码下载后背景黑色问题

问题原因 #

你遇到的问题核心在于JPEG格式不支持透明通道，当原Canvas存在透明背景时，使用toDataURL("image/jpeg")会自动将透明区域填充为黑色。另外若QRCodeCanvas的bgColor设置未生效，也会导致Canvas背景保持透明状态。

解决方案 #

方案1：显式设置QRCodeCanvas的bgColor属性 #

这是最直接的解决方式，直接在组件上指定白色背景：

{qrCodeDataUrl && (
    <QRCodeCanvas
      value={qrCodeDataUrl}
      size={350}
      className="qr-code"
      bgColor="#ffffff" // 强制设置白色背景
      imageSettings={{
        src: "/media/logos/favicon.ico",
        height: 64,
        width: 128,
        excavate: true,
      }}
      level="H"
    />
)}

方案2：手动创建Canvas添加白色背景（方案1无效时使用） #

如果设置bgColor后仍存在问题，可以在下载流程中手动构建带白色背景的新Canvas，彻底规避透明区域转码变黑的问题：

const downloadQRCode = (url: string) => {
  const originalCanvas = document.querySelector(".qr-code") as HTMLCanvasElement;
  if (!originalCanvas) return;

  // 创建与原二维码尺寸一致的新Canvas
  const newCanvas = document.createElement("canvas");
  const ctx = newCanvas.getContext("2d");
  if (!ctx) return;
  
  newCanvas.width = originalCanvas.width;
  newCanvas.height = originalCanvas.height;

  // 先绘制白色背景填充整个Canvas
  ctx.fillStyle = "#ffffff";
  ctx.fillRect(0, 0, newCanvas.width, newCanvas.height);
  // 将原二维码绘制到新Canvas的白色背景之上
  ctx.drawImage(originalCanvas, 0, 0);

  // 生成带白色背景的图片数据（推荐用PNG格式，也可选择JPEG）
  const dataUrl = newCanvas.toDataURL("image/png");
  // 若需要JPEG格式，可替换为：
  // const dataUrl = newCanvas.toDataURL("image/jpeg", 0.9);

  const downloadLink = document.createElement("a");
  downloadLink.href = dataUrl;
  downloadLink.download = "qr-code.png";
  document.body.appendChild(downloadLink);
  downloadLink.click();
  document.body.removeChild(downloadLink);
};

补充说明 #

• 优先尝试方案1，qrcode.react的bgColor属性本身就是为设置Canvas背景设计的，若未生效可能是组件版本问题或样式覆盖导致。
• 方案2通过手动绘制背景，从根源解决了透明区域转JPEG变黑的问题，适配所有场景。

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