[已解决]Nodejs怎么添加二维码到页面

[已解决]Nodejs怎么添加二维码到页面

var qr = require(’./qrcode’); … app.get(’/qr/:id’, function (req,res) { var size = req.query.size; if (size === undefined || size <= 1 || size >= 90) {size = 6;} var short_url = req.params.id; qr.return_qr(“http://qr.cc/” + short_url, function(png_data) { res.set(‘Content-Type’, ‘image/png’); res.send(png_data); }, size); });

ejs里拼html。。。


4 回复

[已解决] Nodejs怎么添加二维码到页面

要在Node.js中将二维码添加到页面上，你可以使用qr-image库来生成二维码，并将其嵌入到你的HTML页面中。以下是一个完整的示例，包括如何设置Express服务器以及如何生成并返回二维码图像。

步骤1: 安装必要的依赖

首先，你需要安装express和qr-image库。你可以通过npm来安装它们：

npm install express qr-image ejs

步骤2: 设置Express服务器

创建一个简单的Express应用，用于处理请求并生成二维码。

const express = require('express');
const qrImage = require('qr-image');
const app = express();

// 设置模板引擎
app.set('view engine', 'ejs');

// 处理二维码生成的GET请求
app.get('/qr/:id', function (req, res) {
    const id = req.params.id;
    const size = req.query.size || 6; // 默认大小为6

    // 生成二维码数据
    const qr_png = qrImage.image(`http://qr.cc/${id}`, { type: 'png', size: size });

    // 返回二维码图像
    res.type('png');
    qr_png.pipe(res);
});

// 渲染包含二维码的HTML页面
app.get('/', function (req, res) {
    res.render('index', { id: 'example' });
});

// 启动服务器
app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

步骤3: 创建EJS模板

创建一个名为index.ejs的文件，用于显示带有二维码的HTML页面。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>QR Code Example</title>
</head>
<body>
    <h1>Scan the QR Code:</h1>
    <img src="/qr/<%= id %>" alt="QR Code">
</body>
</html>

解释

  1. Express服务器: 我们设置了Express服务器来监听端口3000，并定义了两个路由：

    • /qr/:id: 这个路由接收一个ID参数，并生成一个二维码图像。
    • /: 这个路由渲染一个EJS模板，该模板显示一个指向/qr/:id的二维码图像。

  2. 二维码生成: 使用qr-image库生成二维码图像。我们使用qrImage.image()方法生成PNG格式的二维码，并直接将其流式传输给客户端。

  3. EJS模板: index.ejs模板包含一个指向二维码生成路由的图像标签，其中<%= id %>会替换为实际的ID值。

通过以上步骤，你就可以在Node.js应用中生成并显示二维码了。


也用这个

好像有几个，这个比较简单点

在Node.js中添加二维码到页面，可以使用qr-image或qrcode这样的库来生成二维码。根据你的描述，你已经尝试了类似的方法，但代码有一些小问题需要修正。

首先，你需要安装qrcode库。你可以通过npm安装：

npm install qrcode

然后，你可以使用以下代码来创建一个二维码，并将其返回给客户端。这里我将使用EJS作为模板引擎来展示二维码图片。

示例代码

  1. 安装依赖：

    npm install express ejs qrcode

  2. 服务器端代码 (server.js):

    const express = require('express');
const qrcode = require('qrcode');
const app = express();
const port = 3000;

// 设置视图引擎为EJS
app.set('view engine', 'ejs');

app.get('/qr/:id', async (req, res) => {
  const id = req.params.id;
  const size = Math.min(Math.max(req.query.size || 6, 1), 90);

  try {
    const qrCodeDataUri = await qrcode.toDataURL(`http://qr.cc/${id}`);
    res.render('index', { qrCodeSrc: qrCodeDataUri });
  } catch (error) {
    res.status(500).send('Error generating QR code.');
  }
});

app.listen(port, () => {
  console.log(`Server running at http://localhost:${port}/`);
});

  3. EJS模板 (views/index.ejs):

    <!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>QR Code Example</title>
</head>
<body>
  <h1>Scan the QR Code:</h1>
  <img src="<%- qrCodeSrc %>" alt="QR Code">
</body>
</html>

解释

  • 使用qrcode.toDataURL方法生成一个数据URI，它可以直接嵌入到HTML的<img>标签中。
  • req.params.id用于获取URL路径中的ID参数。
  • req.query.size用于从查询字符串中获取大小参数，如果未提供则默认为6。

通过这种方式，当用户访问/qr/some_id?size=x时，会生成一个指定大小的二维码，并以PNG图像的形式显示在页面上。

回到顶部