在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);
};
但是如果我们希望生成的不仅仅是二维码,而是在一张给定的背景图上生成二维码,并在底部配上相应的文字说明,那么就需要借助于其它一些包来实现。
下面是对应的实现代码:
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));
};
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;
}
最终生成的效果:
来自:https://www.cnblogs.com/jaxu/archive/2018/12/29/10196549.html
qrcode.js 是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库。 这篇文章主要讲解qrcode.js生成二维码,qrcode.js解析识别二维码等
vue-qr先说一下特点:带可以设置logo图片、背景图片、背景颜色、尺寸、边距等。简单的生成了二维码,这个生成的是img的二维码,要想生成canvas的二维码,得安装awesome-qr.js
当客户端发现用户在网页的img标签内进行长按操作时,会立刻截屏并且启动二维码识别算法。所以这里用于二维码识别的图片是截屏,而不是之前有人提到的img标签中的图片。基于截屏识别,网页中二维码无法被识别的原因有这几个
qrcode 是一个js插件,具体可以github,这边不多介绍。 qrcode.react这个是修改为React的一个插件。 具体是生成二维码的原理是什么,这边也不多做介绍。
什么是 QRCode.js?QRCode.js 是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库。
绘制渲染的时候图像不显示:是因为图片异步加载,所以canvas的操作需要放在onload事件中,否则图片会不显示,因为图片不止一张,建议放在promise中,用async,await调用
微信群营销已经成为淘客、微商等较为流行的营销方式,我们都知道微信群未满100人之前群二维码是有效可扫码的,让粉丝通过扫码进群。但是人数一旦超过100人后,发出的二维码就失效了,无法再次扫码进群。必须通过邀请加入的方式
安装vue-qr:npm install vue-qr --save;生成二维码实列;属性介绍:text要生成二维码的内容,size设置二维码大小,宽高相等,margin二维码与边框的距离,可以设置白边
这是一个Uint8ClampedArray的类型化数组,这个数组出现最多的也是在imgData上。它会将负数归入0,大于255的数归入255,所以取模就不用了。我们再来看这个数组的长度是384400是怎么来的呢?
在我们基于UniApp的H5项目中,需要生成一些二维码进行展示,另外也需要让用户可以扫码进行一定的快捷操作,本篇随笔介绍一下二维码的生成处理和基于H5的扫码进行操作。二维码的生成,使用了JS文件weapp-qrcode.js进行处理
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!