在 NodejS 中创建包含链接的二维码

Question

我现在正在做一个项目，我需要创建一个包含 NodeJS 中特定信息的二维码。我首先在 HTML 中创建画布，然后在 NodeJS 中使用它

<canvas id="canvas" width="300" height="300"></canvas>

然后在我的 NodeJS 文件中，我正在启动我的函数

const fs = require('fs');
const qrcode = require('qrcode');

module.exports = {
  generateQr: function(link){
    var canvas = new qrcode(document.getElementById('canvas'));

    qrcode.toCanvas(canvas, link, function (error) {
    if (error) console.error(error)
    console.log('success!');
    });
  }
};

不幸的是，我得到了错误：

ReferenceError: document is not defined

从上面的代码，它看起来正确吗？ Qrcode 是否获取了我正在传递的数据，然后我应该怎么做才能使 QR 码出现在我的 HTML 中？

感谢您的帮助

Answer 1

document是浏览器特有的全局对象，不能在node中访问

在node环境下，可以生成二维码图片并使用。

例子：

异步/等待风格：

const fs = require('fs');
const qrcode = require('qrcode');

module.exports = {
  generateQr: async link => {
    const qrCodeDataUrl = await qrcode.toDataURL(link);
    // ...
  }
};

承诺风格：

const fs = require('fs');
const qrcode = require('qrcode');

module.exports = {
  generateQr: link => {
    qrcode.toDataURL(link)
       .then(data => {
          const qrCodeDataUrl = data;
          // ...
       })
       .catch(err => {
          console.error(error);
          // ...
       });
  }
};

回调样式：

const fs = require('fs');
const qrcode = require('qrcode');

module.exports = {
  generateQr: link => {
    qrcode.toDataURL(link, function(err, data) {
       if (error) console.error(error);
       const qrCodeDataUrl = data;
       // ...
    });
  }
};

要在 HTML 文件中呈现它，您可以使用您选择的模板引擎：

以ejs 为例：

const ejs = require('ejs');

// In some route
const qrCodeDataUrl = await generateQr('some link');
const html = ejs.render('<img src="<%= qrCodeDataUrl %>" />', {qrCodeDataUrl});

res.header('Content-Type', 'text/html');
res.send(html);
// ...

注意：这是一个简化的示例。请查看ejs 文档了解更多详情