使用Node.js给二维码添加居中logo时画质差，如何优化输出图像质量？

核心优化点如下： #

• 提升画布基础分辨率
  你当前设置的画布宽度仅为140px，logo需要压缩到20px尺寸，过低的基础分辨率是画质模糊的核心原因。可以将画布尺寸放大2~3倍生成，比如把参数width改为280、cwidth改为40，生成后可直接使用大尺寸二维码，或等比压缩到目标尺寸，清晰度会明显提升。
• 开启canvas高清平滑缩放
  在调用drawImage之前添加画布绘图质量配置，优化缩放时的采样算法：

ctx.imageSmoothingEnabled = true;
ctx.imageSmoothingQuality = 'high';

• 更换无损输出格式
  当前你使用的是有损压缩的JPEG格式，即便质量参数设为1.0仍然会有画质损失。建议更换为PNG格式输出，修改return语句即可：

return canvas.toDataURL('image/png');

• 优化logo缩放比例
  你当前使用的logo原图是500px宽，直接压缩到20px相当于缩小25倍，过大的缩放比例也会导致细节丢失。可以提前将logo处理为接近目标尺寸的大小，减少缩放损耗。
• 可选优化：添加logo白边
  可以在绘制logo前先在对应位置绘制一个比logo稍大的白色正方形，既可以避免JPEG压缩时logo边缘和二维码黑块混色变糊，也能提升二维码的识别成功率。

修改后的参考代码 #

const qrcode = require('qrcode');
const { createCanvas, loadImage } = require('canvas');

async function create(dataForQRcode, center_image, width, cwidth) {
  // 放大2倍生成，提升基础分辨率
  const renderScale = 2;
  const renderWidth = width * renderScale;
  const renderCwidth = cwidth * renderScale;
  
  const canvas = createCanvas(renderWidth, renderWidth);
  qrcode.toCanvas(canvas, dataForQRcode, {
    errorCorrectionLevel: 'H',
    version: 5,
    margin: 1,
    color: {
      dark: '#000000',
      light: '#ffffff',
    },
  });

  const ctx = canvas.getContext('2d');
  // 开启高清平滑
  ctx.imageSmoothingEnabled = true;
  ctx.imageSmoothingQuality = 'high';
  
  const img = await loadImage(center_image);
  const center = (renderWidth - renderCwidth) / 2;
  
  // 可选：绘制白边
  ctx.fillStyle = '#fff';
  ctx.fillRect(center - 2, center - 2, renderCwidth + 4, renderCwidth + 4);

  ctx.drawImage(img, center, center, renderCwidth, renderCwidth);
  // 输出无损PNG
  return canvas.toDataURL('image/png');
}

// 调用时参数不用改，内部已经做了倍率放大
const QRcode = await create(
    "Hello guys",
    "https://images.pexels.com/photos/10013232/pexels-photo-10013232.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500",
    140,
    20
);

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