额外阅读二维码的技术基础是什么？

一、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