怎样生成二维码并显示？

Creator 2.x
#1

有朋友提到通过js实现二维码生成，然后把他当作一个node显示。原文点这

我搜索到了QRCode.js ，但没能理解怎么做到，而且看下面的描述，貌似做不到吧？

QRCode.js 是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库。

大家有什么好的方法或者猜想么~ 希望告知的时候稍微详细点~

5赞
#2

自己up…

#3

你可以在服务器生成然后传给ccc，我研究了下，发现是div调用的qrcode.js .ccc里面没有div。

#4

服务器生成是一个解决方案。我目前是想 算法在qrcode.js 主要是怎么让ccc使用node来模拟div把二维码画出来 我去看看ccc绘图再挣扎下。。

#5

那我估计你要自己弄算法了

#6

cc.graphics？

#8

如果你的项目发布为Web而不是Native的话，可以这样简单使用（先将QRCode.min.js导入为插件）：

var div = document.createElement("div");
var qrcode = new QRCode(div, "http://www.cocos.com/");
var img = div.children[1];
img.onload = () => {
    var texture = new cc.Texture2D();
    texture.initWithElement(img);
    texture.handleLoadedTexture();
    var spriteFrame = new cc.SpriteFrame(texture);
    var node = new cc.Node();
    var sprite = node.addComponent(cc.Sprite);
    sprite.spriteFrame = spriteFrame;
    this.node.addChild(node);
}

示例项目qrcode.zip (20.4 KB)

3赞
#9

https://github.com/alexeyten/qr-image
推荐用这个，我测试了浏览器和native都可以使用

    var qr = require('qr-image');

    var ec_level = 'Q';
    cc.log(qr.matrix("cocos creator",ec_level));

qr.matrix生成一个0、1的二维数组，我们拿这个数组序列化成可以看见的黑白块就好了

2赞
#10

感谢大家的回复~已经实现了~
思路：通过某些算法，得到一个二位数组，然后使用Graphics组件画出来。

我使用的算法是这个qrcode.js，测试了浏览器和native都可以使用。

相关代码：

	var qrcode = new QRCode(-1, QRErrorCorrectLevel.H);
	qrcode.addData('http://www.lihang.info');
	qrcode.make();

	var ctx = this.node.getComponent(cc.Graphics);

	// compute tileW/tileH based on node width and height
	var tileW = this.node.width / qrcode.getModuleCount();
	var tileH = this.node.height / qrcode.getModuleCount();

	// draw in the Graphics
	for (var row = 0; row < qrcode.getModuleCount(); row++) {
		for (var col = 0; col < qrcode.getModuleCount(); col++) {
			// ctx.fillStyle = qrcode.isDark(row, col) ? options.foreground : options.background;
			if (qrcode.isDark(row, col)) {
				ctx.fillColor = cc.Color.BLACK;
			} else {
				ctx.fillColor = cc.Color.WHITE;
			}
			var w = (Math.ceil((col + 1) * tileW) - Math.floor(col * tileW));
			var h = (Math.ceil((row + 1) * tileW) - Math.floor(row * tileW));
			ctx.rect(Math.round(col * tileW), Math.round(row * tileH), w, h);
			ctx.fill();
		}
	}
#11

你这个脚本编译不过。SyntaxError: Unexpected token <

#12

选中脚本，在右上角 【属性检查器】勾选【导入为插件】

ps：一定记得点右上角的绿色勾 才是真正应用。。。

#13

试过了，一样的，使用的最新的1.4.0版本

#14

麻烦你把项目发下，你的方法:four_leaf_clover:我也没有成功

#15

assets.zip (10.7 KB)

lib下的qrcode脚本是生成二维码的算法，需要导入为插件。
QRCode脚本负责绘制二维码，因为drawcall太高，代码我简单改了下

降低Graphics的drawcall，参见我另一个帖子：Creator1.4 ： 单个Graphics的DrawCall数很多是什么问题？

5赞
#16

可以了，但上下需要反转一下，不过不影响使用都能扫出来。

#17

有办法再贴一张logo图吗?

#18

你直接在二维码上面加上logo图片就行了 大小不要超过二维码的40%就行

#19

@toddlxt 感谢你的推荐
之前是使用的cc.graphics画出二维码，其他浏览器和原生都没有任何问题，唯独IE11，总是会出现画出一半的情况。
用了@toddlxt 推荐的插件，解决此问题

#20

打包到微信开发者工具不能用吗？

#21

打包到微信开发者程序中能正常运行吗