Laya 二维码

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

一、qrcode.js

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

然后参照官网

    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