额外阅读二维码的技术基础是什么？
一、qrcode.js
参考QRCode.js：使用 JavaScript 生成二维码
QRCode.js 是一个用于生成二维码的 JavaScript 库。主要是通过获取 DOM 的标签,再通过 HTML5 Canvas 绘制而成,不依赖任何库。
<input id="text" type="text" value="http://www.runoob.com" style="width:80%" /><br />
<div id="qrcode" style="width:100px; height:100px; margin-top:15px;"></div>
<script type="text/javascript">
var qrcode = new QRCode(document.getElementById("qrcode"), {
width : 100,
height : 100
});
function makeCode () {
var elText = document.getElementById("text");
if (!elText.value) {
alert("Input a text");
elText.focus();
return;
}
qrcode.makeCode(elText.value);
}
makeCode();
注意，传入的是Div,然后要调用makeCode(xxx)
<div id="qrcode" style="width:100px; height:100px; margin-top:15px;"
title="http://www.baidu.com">
<canvas width="100" height="100" style="display: none;">
</canvas>
<img src="data:image/png;base64,........" style="display: block;">
</div>
可以看到,div里面塞入了canvas 和 img标签
二、Laya
参考官方示例
先把js加载进来
<!--用户自定义顺序文件添加到这里-->
<!--jsfile--Custom-->
<script type="text/javascript" src="libs/min/qrcode.min.js"></script>
<!--jsfile--Custom-->
然后参照官网
private createQR(): void {
var div: any= Browser.document.createElement("div");
this.qrcode = new Browser.window.QRCode(div, {
width: 100,
height: 100
});
var url: String = "http://layabox.com/";
this.qrcode.makeCode(url);
this.qrcodeSp = new Sprite();
this.view.addChild(this.qrcodeSp);
}
private clickFunc(): void {
//获取，注意这里是异步的，开发者可以加个延时在获取。
var url: string = this.qrcode._oDrawing._elImage.src;
this.qrcodeSp.loadImage(url, 0, 0, 100, 100);
}
这里创建的div只是为了构造参数，实际上添加上来的sprite用了它内部的数据。在这里用console打印出来的url变量是这样的：data:image/png;base64,......。当然，也可以不用sprite，直接用image去load，效果是一样的
this.qrImg = new Laya.Image();
this.qrImg.loadImage(url);
注意：这个时候生成的二维码在微信或者浏览器中长安没任何反应，因为qrcode生成的是canvas标签而不是img标签。所以要想长按弹出识别的选项，只有用img标签才可以。这个开发者可以自行扩展。
官网说的自行扩展，可以简单地直接把div标签添加上去。
private createQR(): void {
var div: any = document.createElement("div");
var e = Laya.Browser.container;
//把video放到最下面
document.body.insertBefore(div, e);
this.qrcode = new Browser.window.QRCode(div, {
width: 100,
height: 100
});
当然为了不遮挡，还要处理一下参数：
//layaCanvas背景透明
Config.isAlpha = true;
Laya.init(640, 1134, Laya.WebGL);
Laya.stage.screenMode = Stage.SCREEN_HORIZONTAL;
Laya.stage.alignH = Stage.ALIGN_CENTER;
Laya.stage.alignV = Stage.ALIGN_MIDDLE;
Laya.stage.scaleMode = Stage.SCALE_SHOWALL;
Laya.stage.bgColor = "none";
然后再处理一下布局就行了
end
