dggmyyc/application/admin/view/demo/qr_code.html

<!--空白页面参考模版-->
{extend name="public/base" /}
{block name='content'}
{include file='public/content_header' /}
{js href="__ADMIN_PLUGINS__/jquery-qrcode/jquery-qrcode.min.js" /}

<section class="content">


    <div class="row">
        <div class="col-md-6">
            <div class="box">
                <div class="box-header">
                    <h3 class="box-title">前端生成二维码</h3>
                </div>


                <form id="frontDataForm" class="dataForm form-horizontal" method="post" onsubmit="return frontCreate()" enctype="multipart/form-data">
                    <div class="box-body">
                        <div class="fields-group">
                            <div class="form-group">
                                <label for="frontContent" class="col-sm-2 control-label">内容</label>
                                <div class="col-sm-8">
                                    <div class="input-group">
                                        <span class="input-group-addon"><i class="fa fa-pencil"></i></span>
                                        <input  name="content" id="frontContent" maxlength="210" class="form-control" placeholder="请输入文字或网址,按回车键生成">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="box">
                <div class="box-header">
                    <h3 class="box-title">生成结果</h3>
                </div>
                <div class="box-body">
                    <div style="text-align: center">
                        <div id="frontResult"></div>
                    </div>
                </div>
            </div>
        </div>



        <div class="col-md-6">
            <div class="box">

                <div class="box-header">
                    <h3 class="box-title">PHP生成二维码</h3>
                </div>

                <form id="dataForm" class="dataForm form-horizontal" method="post" onsubmit="return create()" enctype="multipart/form-data">
                    <div class="box-body">
                        <div class="fields-group">
                            <div class="form-group">
                                <label for="content" class="col-sm-2 control-label">内容</label>
                                <div class="col-sm-8">
                                    <div class="input-group">
                                        <span class="input-group-addon"><i class="fa fa-pencil"></i></span>
                                        <input  name="content" id="content" maxlength="210" class="form-control" placeholder="请输入文字或网址,按回车键生成">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </form>
            </div>
            <div class="box">
                <div class="box-header">
                    <h3 class="box-title">生成结果</h3>
                </div>
                <div class="box-body">
                    <div style="text-align: center">
                        <img  src="" id="result">
                    </div>
                </div>
            </div>
        </div>
    </div>

    <img id="qrLogo" style="display: none;" src="/uploads/attachment/20190902/6a673f554c694a41971fca94c7503315.jpg">
    <script>

        function frontCreate() {
            var content = $("#frontContent").val();

            //jquery-qrcode 文档地址 https://larsjung.de/jquery-qrcode/
            $('#frontResult').qrcode({
                width: "300",
                height: "300",
                mode:4,
                mSize: 0.3,
                text: toUtf8(content),
                image:$('#qrLogo')[0]
            });

            return false;
        }



        //php生成
        function create() {
            var content = $("#content").val();
            $.ajax({
                url: '{:url("createQrCode")}',
                type: "post",
                data: {
                    content:content
                },
                dataType: 'json',
                cache: false,
                async:false,
                success: function (result) {
                    console.log(result);
                    if(result.code==1){
                        $("#result").attr('src',result.data.qrcode+"?"+img_name_random());
                    }else {
                        layer.msg(result.msg,{icon:2});
                    }
                },
                error: function (XMLHttpRequest, textStatus, errorThrown) {
                    layer.msg('系统异常，请稍后重试',{icon:2});
                }
            });

            return false;
        }
        //图片后缀随机数
        function img_name_random() {
            var rand_one = parseInt(100 * Math.random());
            var rand_two = parseInt(100 * Math.random());
            return String(rand_one) + String(rand_two);
        }


        function toUtf8(str) {
            var out, i, len, c;
            out = "";
            len = str.length;
            for(i = 0; i < len; i++) {
                c = str.charCodeAt(i);
                if ((c >= 0x0001) && (c <= 0x007F)) {
                    out += str.charAt(i);
                } else if (c > 0x07FF) {
                    out += String.fromCharCode(0xE0 | ((c >> 12) & 0x0F));
                    out += String.fromCharCode(0x80 | ((c >>  6) & 0x3F));
                    out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));
                } else {
                    out += String.fromCharCode(0xC0 | ((c >>  6) & 0x1F));
                    out += String.fromCharCode(0x80 | ((c >>  0) & 0x3F));
                }
            }
            return out;
        }
    </script>


</section>

{/block}