Node.js在图片模板上生成二维码图片并附带底部文字说明实现详解

下面是关于“Node.js在图片模板上生成二维码图片并附带底部文字说明实现详解”的完整攻略：

1. 确认需求和准备工作

首先，我们需要明确需求：将一个指定的网址生成二维码图片，并将其和输入的底部文字添加到一个给定的模板图片上，最终生成一张包含二维码和底部文字的图片。

在开始实现之前，我们需要做一些准备工作：

• 安装 Node.js 和相关依赖；
• 准备好模板图片和二维码生成库。

2. 实现过程

2.1 安装相关依赖

我们需要使用以下两个 npm 包来实现该需求：

• canvas: 一个用于创建和操作 Canvas 元素的库，可以用它来绘制模板图片和最终的图片；
• qrcode: 一个用于生成二维码图片的库。

可以使用以下命令来安装：

npm install canvas qrcode

2.2 创建 Canvas 及绘制模板图片

首先，我们需要读取模板图片并创建一个 Canvas 元素。可以使用以下代码：

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

async function generateImage(backgroundUrl, outputWidth, outputHeight) {
  const backgroundImg = await loadImage(backgroundUrl);
  const canvas = createCanvas(outputWidth, outputHeight);
  const ctx = canvas.getContext('2d');
  ctx.drawImage(backgroundImg, 0, 0, outputWidth, outputHeight);
  return canvas;
}

在这段代码中，我们首先使用 loadImage 方法读取模板图片。然后，我们创建一个 Canvas 元素并指定它的宽和高（以像素为单位）。接下来，我们获取画布的上下文（context），使用 drawImage 方法将模板图片绘制到画布上，最后返回该画布。

2.3 生成二维码图片

接下来，我们需要生成二维码图片。可以使用以下代码：

const QRCode = require('qrcode');

async function generateQRCode(url, outputPath) {
  const opts = {
    errorCorrectionLevel: 'H',
    type: 'image/png',
    rendererOpts: { quality: 0.3 }
  };
  await QRCode.toFileStream(outputPath, url, opts);
}

在这段代码中，我们首先导入 qrcode 库。然后，我们使用 toFileStream 方法生成二维码并将其写入到磁盘上的指定文件中。其中，第一个参数是输出文件的路径，第二个参数是待编码的文本内容，第三个参数是一些编码选项，例如容错级别等。

2.4 将二维码图片添加到画布中并添加底部文字

最后，我们需要将生成的二维码图片添加到画布中，并在底部添加一些文字说明。可以使用以下代码：

async function addQRCodeAndText(canvas, qrCodeUrl, text, textHeight) {
  const ctx = canvas.getContext('2d');
  const qrCodeImg = await loadImage(qrCodeUrl);
  const qrCodeWidth = canvas.width * 0.4;
  const qrCodeHeight = qrCodeWidth;
  const qrCodeX = canvas.width * 0.5 - qrCodeWidth / 2;
  const qrCodeY = canvas.height * 0.25;
  ctx.drawImage(qrCodeImg, qrCodeX, qrCodeY, qrCodeWidth, qrCodeHeight);

  ctx.font = `${textHeight}px sans-serif`;
  ctx.textAlign = 'center';
  ctx.fillStyle = '#000';
  const textX = canvas.width * 0.5;
  const textY = canvas.height * 0.75;
  ctx.fillText(text, textX, textY);

  return canvas.toBuffer();
}

在这段代码中，我们首先获取画布的上下文（context）。然后，我们读取生成的二维码图片，并计算出它的宽、高、位置等信息。接下来，我们使用 drawImage 方法将二维码图片绘制到画布上。

最后，我们使用 fillText 方法在画布底部添加一些文字说明。其中，我们使用 font 属性设置文字的字号和字体，使用 textAlign 属性设置文字的对齐方式，使用 fillStyle 属性设置文字的颜色。

2.5 完整示例

结合以上的代码段，可以编写以下完整的示例程序：

const { loadImage, createCanvas } = require('canvas');
const QRCode = require('qrcode');
const fs = require('fs').promises;

async function generateImage(backgroundUrl, qrCodeText, outputFilePath, outputWidth, outputHeight, textHeight) {
  const canvas = await generateCanvas(backgroundUrl, outputWidth, outputHeight);
  const qrCodeUrl = await generateQRCode(qrCodeText, 'qr.png');
  const buffer = await addQRCodeAndText(canvas, qrCodeUrl, '底部文字说明', textHeight);
  await fs.writeFile(outputFilePath, buffer);
}

async function generateCanvas(backgroundUrl, outputWidth, outputHeight) {
  const backgroundImg = await loadImage(backgroundUrl);
  const canvas = createCanvas(outputWidth, outputHeight);
  const ctx = canvas.getContext('2d');
  ctx.drawImage(backgroundImg, 0, 0, outputWidth, outputHeight);
  return canvas;
}

async function generateQRCode(url, outputPath) {
  const opts = {
    errorCorrectionLevel: 'H',
    type: 'image/png',
    rendererOpts: { quality: 0.3 }
  };
  await QRCode.toFileStream(outputPath, url, opts);
  return outputPath;
}

async function addQRCodeAndText(canvas, qrCodeUrl, text, textHeight) {
  const ctx = canvas.getContext('2d');
  const qrCodeImg = await loadImage(qrCodeUrl);
  const qrCodeWidth = canvas.width * 0.4;
  const qrCodeHeight = qrCodeWidth;
  const qrCodeX = canvas.width * 0.5 - qrCodeWidth / 2;
  const qrCodeY = canvas.height * 0.25;
  ctx.drawImage(qrCodeImg, qrCodeX, qrCodeY, qrCodeWidth, qrCodeHeight);

  ctx.font = `${textHeight}px sans-serif`;
  ctx.textAlign = 'center';
  ctx.fillStyle = '#000';
  const textX = canvas.width * 0.5;
  const textY = canvas.height * 0.75;
  ctx.fillText(text, textX, textY);

  return canvas.toBuffer();
}

// 示例：生成一张包含二维码图片和底部文字说明的图片
generateImage('background.png', 'https://www.baidu.com/', 'output.png', 800, 600, 60).then(() => {
  console.log('图片生成成功！');
}).catch((err) => {
  console.log(err);
});

在这个示例程序中，我们调用了 generateImage 函数，传入模板图片、二维码的文本内容、输出文件路径、画布的宽和高、底部文字的字号等参数。它内部调用了之前提到的三个函数来生成和处理图片，最终将生成的图片写入到指定的文件中。