In Node.js, we can use the qr-image The package generates the QR code image directly in the background. The usage is simple:

var qr = require('qr-image');
exports.createQRImage = function(res, str){
    var img = qr.image(str); // A QR code picture will be generated
    res.writeHead(200, {'Content-Type': 'image/png'});
    img.pipe(res);
};

However, if we want to generate not only two-dimensional code, but also two-dimensional code on a given background map, with corresponding text description at the bottom, then we need to use other packages to achieve.

• images Package is a lightweight cross platform image processing library on Node.js, which can be used for image editing and drawing.
• svg2png Used to convert the generated svg into a png picture.
• text-to-svg It is used to convert a given text into a corresponding svg.

The following is the corresponding implementation code:

exports.genQrImage = function (text, url) {
    const tts = textToSVG.loadSync(path.join(__dirname, '../../msyh.ttf'));
    const tSvg = tts.getSVG(text, {
        x: 0,
        y: 0,
        fontSize: 20,
        anchor: 'top'
    });
    const margin = 35; // Left and right margins of QR code
    const top = 90; // Distance from QR code to top
    var sourceImage = images(path.join(__dirname, '../../source.png'));
    var w = sourceImage.width(); // Width of template image
    return svg2png(tSvg)
        .then((rst) => {
            var textImage = images(rst);
            var qrImage = images(qr.imageSync(url, {type: 'png'})).size(w - margin * 2); // The size of the QR code is: the width of the template image minus the left and right margins
            return sourceImage
                .draw(qrImage, margin, top) // Location of QR Code: x=Left margin, y=top
                .draw(textImage, (w - textImage.width()) / 2, top + qrImage.height() + 10) // Bottom text, x To center, y=top+Height of QR code+10
                .encode('png', {quality: 90});
        })
        .catch(e => console.error(e));
};

The genQrImage function takes two parameters, text is the text displayed at the bottom of the QR code, and url is the QR code address to be generated. Where source.png is the given background image, and msyh.ttf is the font file of Microsoft YaHei. The basic idea is to load a pre specified background image through the images library, and then draw the QR code image and text on the background image through the calculated starting point coordinates. Finally, encode method is used to output the picture to buffer, and save method is also used to save the picture to server. The specific usage can be viewed github Document on.

myShareQrImage: function* (next) {
    var _text = "Contacts: xxx     Mobile number: 13200000000";
    var _url = "http://www.cnblogs.com/jaxu";
    var _buffer = yield BizUtils.genQrImage(_text, _url);
    this.res.setHeader('Content-type', 'image/png');
    this.body = _buffer;
    yield next;
}

Final effect: