javascript - 我正在将 Logo 添加到二维码中心，但图像质量很差。如何提高品质？

Question

这是我的函数，我通过它向二维码添加 Logo 。

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

//Using canvas I am adding logo to center of image(center_image) and also passing width
async function create(dataForQRcode, center_image, width, cwidth) {
  const canvas = createCanvas(width, width);
  qrcode.toCanvas(canvas, dataForQRcode, {
    errorCorrectionLevel: 'H',
    version: 5,
    margin: 1,
    color: {
      dark: '#000000',
      light: '#ffffff',
    },
  });

  const ctx = canvas.getContext('2d');
  const img = await loadImage(center_image);
  const center = (width - cwidth) / 2;

  //and using drawImage I am adding logo to qr code

  ctx.drawImage(img, center, center, cwidth, cwidth);
  return canvas.toDataURL('image/jpeg', 1.0);
}

这里我调用该函数并传递所有参数。

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
);

之后我得到了中心带有 Logo 的二维码，但 Logo 的质量非常差。我不知道如何提高图像质量。

Answer 1

在qrcode.toCanvas选项中添加宽度。

qrcode.toCanvas(canvas, dataForQRcode, {
    errorCorrectionLevel: 'H',
    version: 5,
    margin: 1,
    width: width,
    color: {
        dark: '#000000',
        light: '#ffffff',
    },
});