如何在中心生成 QR 码和图像？答案

【问题标题】：How to generate QR code together with the image in a center?如何在中心生成 QR 码和图像？
【发布时间】：2018-12-22 19:55:39
【问题描述】：

如何在 react js 或 node js 中生成二维码？

也许你知道一个用于生成 QR 码和中心图像的库或包？）

示例

【问题讨论】：

标签： node.js reactjs qr-code

【解决方案1】：

此功能将创建带有标志的二维码。

const qrcode= require('qrcode');

const getQRcodeImage = async () => {
    try {        
        let canvas=await qrcode.toCanvas(`my sample text`);

        //adding a log at center        
        const imgDim={width:30,height:30}; //logo dimention
        var context = canvas.getContext('2d');
        var imageObj = new Image();  
        imageObj.src = './images/logo.png';        
        imageObj.onload = function() {
          context.drawImage(imageObj, 
          canvas.width / 2 - imgDim.width / 2,
          canvas.height / 2 - imgDim.height / 2,imgDim.width,imgDim.height);
        };        
        return canvas;
    }catch (e) {
        console.error(e);
        return "";
    }
}

用法：

$(document).ready(function () {
    getQRcodeImage().then(res=>{$("#qrcodeAuth").html( res);});
}

【讨论】：

这将在中心添加一个图像，但只是在 QR 码的顶部 - 隐藏该区域中的任何数据，并可能使 qr 码无效。还是我错过了什么？
图像显示在我的中心，我可以正确扫描二维码。

【解决方案2】：

我认为有很多免费的 API 可以生成带有徽标的二维码，即：http://qrickit.com/qrickit_apps/qrickit_api.php

【讨论】：

【解决方案3】：

您可以使用qecode，如下所示：在前端（无需反应）：

<canvas id="canvas"></canvas>

<script src="/build/qrcode.min.js"></script>
<script>
  QRCode.toCanvas(document.getElementById('canvas'), 'sample text', function (error) {
    if (error) console.error(error)
    console.log('success!');
  })
</script>

在 nodejs 中：

var QRCode = require('qrcode')

QRCode.toDataURL('I am a pony!', function (err, url) {
  console.log(url)
})

【讨论】：

问题是如何在中心添加徽标/图像。你的解决方案如何解决这个问题？