Node.js在图片模板上生成二维码图片并附带底部文字说明实现详解


Posted in Javascript onAugust 07, 2019

在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;
}

最终生成的效果:

Node.js在图片模板上生成二维码图片并附带底部文字说明实现详解

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery的写法不同导致的兼容性问题的解决方法
Jul 29 Javascript
js切换div css注意的细节
Dec 10 Javascript
DOM节点的替换或修改函数replaceChild()用法实例
Jan 12 Javascript
JavaScript实现鼠标滑过处生成气泡的方法
May 16 Javascript
利用jquery禁止外层滚动条的滚动
Jan 05 Javascript
纯JS实现弹性导航条效果
Mar 06 Javascript
JavaScript DOM元素常见操作详解【添加、删除、修改等】
May 09 Javascript
使用VUE实现在table中文字信息超过5个隐藏鼠标移到时弹窗显示全部
Sep 16 Javascript
关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题
Jan 16 Javascript
JavaScript 引用类型实例详解【数组、对象、严格模式等】
May 13 Javascript
js中Object.create实例用法详解
Oct 05 Javascript
Vue3如何理解ref toRef和toRefs的区别
Feb 18 Vue.js
微信小程序引入Vant组件库过程解析
Aug 06 #Javascript
Vue数据绑定实例写法
Aug 06 #Javascript
Vue代码整洁之去重方法整理
Aug 06 #Javascript
VUE写一个简单的表格实例
Aug 06 #Javascript
VUE前后端学习tab写法实例
Aug 06 #Javascript
Vue路由前后端设计总结
Aug 06 #Javascript
vue实现行列转换的一种方法
Aug 06 #Javascript
You might like
注册页面之前先验证用户名是否存在的php代码
2012/07/14 PHP
php在程序中将网页生成word文档并提供下载的代码
2012/10/09 PHP
PHP获取短链接跳转后的真实地址和响应头信息的方法
2014/07/25 PHP
PHP数组生成XML格式数据的封装类实例
2016/11/10 PHP
jquery 入门教程 [翻译] 推荐
2009/08/17 Javascript
Javascript 制作图形验证码实例详解
2016/12/22 Javascript
自定义vue全局组件use使用、vuex的使用详解
2017/06/14 Javascript
浅谈Node Inspector 代理实现
2017/10/19 Javascript
基于jquery实现左右上下移动效果
2018/05/02 jQuery
Vue引入Stylus知识点总结
2020/01/16 Javascript
vue实现轮播图帧率播放
2021/01/26 Vue.js
[06:57]DOTA2-DPC中国联赛 正赛 Ehome vs PSG.LGD 选手采访
2021/03/11 DOTA
跟老齐学Python之集合的关系
2014/09/24 Python
Python金融数据可视化汇总
2017/11/17 Python
Python编写合并字典并实现敏感目录的小脚本
2019/02/26 Python
超简单使用Python换脸实例
2019/03/27 Python
python tkinter控件布局项目实例
2019/11/04 Python
PYcharm 激活方法(推荐)
2020/03/23 Python
Python创建自己的加密货币的示例
2021/03/01 Python
Under Armour安德玛法国官网:美国高端运动科技品牌
2018/06/29 全球购物
Allsole美国/加拿大:英国一家专门出售品牌鞋子的网站
2018/10/21 全球购物
Ramy Brook官网:美国现代女装品牌
2019/06/18 全球购物
SQL Server数据库笔试题和答案
2016/02/04 面试题
租车协议书范本
2014/04/22 职场文书
小学数学教研活动总结
2014/07/01 职场文书
小学校长汇报材料
2014/08/20 职场文书
2014年图书馆工作总结
2014/11/25 职场文书
行政人事主管岗位职责
2015/04/11 职场文书
入党宣誓仪式主持词
2015/06/29 职场文书
高三数学复习备考教学反思
2016/02/18 职场文书
廉洁自律承诺书2016
2016/03/25 职场文书
教你怎么用python selenium实现自动化测试
2021/05/27 Python
Pandas加速代码之避免使用for循环
2021/05/30 Python
MySQL七种JOIN类型小结
2021/10/24 MySQL
关于k8s环境部署mysql主从的问题
2022/03/13 MySQL
微软官方消息,在 2023 年 4 月 11 日之后微软将不再为 Office 2013 和 Skype for Business 2015 提供安全更新
2022/04/21 数码科技