Node.js结合qr-image与images实现带文字说明的定制二维码生成
本文详解如何在Node.js环境中,利用qr-image生成基础二维码,并结合images库进行图片合成。通过加载背景模板、计算坐标绘制二维码及文字,最终输出带有底部说明文字的定制PNG图片,适用于需要品牌化展示的场景。
Node.js生成基础二维码与定制合成方案
在Node.js开发中,利用qr-image模块可以直接在后端生成标准的二维码图片,其基本调用方式如下所示:
var qr = require('qr-image');
exports.createQRImage = function(res, str){
var img = qr.image(str); // 将生成二维码图片
res.writeHead(200, {'Content-Type': 'image/png'});
img.pipe(res);
};
然而,若需求是在预设的背景图上嵌入二维码,并在下方添加特定的文字说明,则需引入额外的图像处理工具来完成合成工作。
- images是一个轻量级的跨平台Node.js图像处理库,支持对图片进行编辑和绘制操作。
- svg2png模块负责将生成的SVG矢量图形转换为PNG格式的图片。
- text-to-svg模块用于将指定的文本字符串转换为对应的SVG矢量数据。
具体的实现逻辑代码如下:
代码实现与参数解析
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; // 二维码的左右边距
const top = 90; // 二维码距顶部的距离
var sourceImage = images(path.join(__dirname, '../../source.png'));
var w = sourceImage.width(); // 模板图片的宽度
return svg2png(tSvg)
.then((rst) => {
var textImage = images(rst);
var qrImage = images(qr.imageSync(url, {type: 'png'})).size(w - margin * 2); // 二维码的尺寸为:模板图片的宽度减去左右边距
return sourceImage
.draw(qrImage, margin, top) // 二维码的位置:x=左边距,y=top
.draw(textImage, (w - textImage.width()) / 2, top + qrImage.height() + 10) // 底部文字,x为居中显示,y=top+二维码的高度+10
.encode('png', {quality: 90});
})
.catch(e => console.error(e));
};
函数genQrImage接收两个参数:text代表显示在二维码底部的说明文字,url为生成二维码的目标链接。代码中引用了source.png作为背景模板,并使用msyh.ttf作为微软雅黑字体文件。
核心流程是:首先利用images库加载指定的背景图片,随后根据计算得出的起始坐标,在背景图上绘制二维码图像及文字。最后,通过encode方法将合成后的图片输出至buffer缓冲区,也可使用save方法直接保存至服务器。更详细的用法请参考GitHub文档。
myShareQrImage: function* (next) {
var _text = "联系人:xxx 手机号: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;
}
最终生成的图片效果如下:

本文介绍了上述实现方案,希望能为相关开发工作提供参考,欢迎继续支持本站内容。
macOS卸载Node.js指南:区分Homebrew与pkg安装包的处理方式
2026-11-05 11:28:12
JS逆向入门:浏览器Console调试与Node.js环境搭建指南
2026-11-05 10:57:15
Node.js 大版本升级需要注意哪些破坏性变更
2026-11-03 20:35:44
Node.js官网LTS版与Current版有什么区别
2026-11-03 19:33:49
Windows彻底卸载Node.js:清理AppData残留与PATH环境变量
2026-11-03 19:15:35
