Shulou(Shulou.com)06/01 Report--

Today, I would like to share with you how Node.js generates a QR code picture on the picture template with a description of the text at the bottom. The content is detailed and the logic is clear. I believe most people still know too much about this knowledge, so share this article for your reference. I hope you can get something after reading this article.

In Node.js, we can generate QR code images directly in the background through the qr-image package. The method is very simple:

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

But if we want to generate not only a QR code, but also a QR code on a given background image with a corresponding text description at the bottom, then we need to achieve it with the help of some other packages.

Images package is a lightweight cross-platform image processing library on Node.js, which can be used to edit and draw pictures.

Svg2png is used to convert the generated svg into png images.

Text-to-svg is used to convert a given text into a corresponding svg.

Here 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; / / the left and right margins of the QR code const top = 90 / / the distance from the top of the QR code var sourceImage = images (path.join (_ dirname,'.. / source.png')); var w = sourceImage.width (); / / the width of the 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 picture minus the left and right margins return sourceImage. Draw (qrImage, margin, top) / / the position of the QR code: X = left margin, y=top. Draw (textImage, (w-textImage.width ()) / 2, top + qrImage.height () + 10) / / bottom text, x is centered display Height of QR code + 10. Encode ('png', {quality: 90}) ) .catch (e = > console.error (e));}

The function genQrImage takes two parameters, text is the text displayed at the bottom of the QR code, and url is the address of the QR code to be generated. 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 picture through the images library, and then draw the QR code picture and text on the background image through the calculated starting point coordinates. Finally, the painted picture is output to buffer by encode method, and of course it can be saved to the server by save method. You can view the documentation on github for specific usage.

MyShareQrImage: function* (next) {var _ text = "contact: 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;}"

The resulting effect:

These are all the contents of the article "how to generate a QR code picture with a text description at the bottom of the Node.js on the picture template". Thank you for reading! I believe you will gain a lot after reading this article. The editor will update different knowledge for you every day. If you want to learn more knowledge, please pay attention to the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.