zoukankan      html  css  js  c++  java
  • 二维码的生成-QRCode.js

    一、QRCode.js介绍:

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

    二、实例代码如下:下面是我项目中用到的一个demo实例

    @model LeaRun.Entity.Channels.QrCodeDto
    <!DOCTYPE html>
    
    <html>
    <head>
        <meta name="viewport" content="width=device-width" />
        <title>AddChannels</title>
        <link rel="stylesheet" href="~/js/layui/css/layui.css" />
        @*<script src="~/js/layui/layui.js"></script>*@
        <script src="~/js/wangEditor/wangEditor.js"></script>
        <script src="~/js/stringHelper.js"></script>
        <script src="~/Scripts/jquery.qrcode.min.js"></script>
    
    </head>
    <body>
        <div class="wrapper">
            <div class="page-heading">
                <h3>
                    推广二维码及推广链接
                </h3>
            </div>
            <hr />
            <div class="row">
                <div class="col-md-12">
                    <section class="panel">
                        <header class="panel-heading">
                            <div role="form" class="form-horizontal adminex-form">
                                @*<button class="btn btn-theme03" style="margin-top:15px;margin-bottom:40px;float:right;" onclick="window.history.back();">返回</button>*@
                                <section class="panel">
                                    <div class="panel-body">
                                        <a style="color:black;float:right" onclick="window.history.back();"><i style="font-size:40px;" class="layui-icon layui-icon-close"></i></a>
                                    </div>
                                    <div class="panel-body">
    
                                        @*<div class="form-group" style="display:inline-block;auto;">
                                                <div class="layui-form-item">
                                                    <label class="layui-form-label " style="106px;">所属渠道:</label>
                                                    <div class="layui-input-block">
                                                        <select name="interest" id="channelsSelect" class="form-control" lay-filter="aihao">
                                                            <option value="0" selected=""></option>
                                                        </select>
                                                    </div>
                                                </div>
                                            </div>*@
    
                                        <div class="form-group">
                                            <label style="text-align:right" class="col-lg-1 control-label"><span style="color:red">*</span> 广告名称</label>
                                            <div class="col-lg-9">
                                                <span style="line-height: 34px;">@Model.advertisingName</span>
                                                @*<input type="text" readonly="readonly" value="@Model.advertisingName" name="advertisingName" id="advertisingName" class="form-control" required placeholder="广告名称">*@
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label style="text-align:right" class="col-lg-1 control-label"><span style="color:red">*</span> 所属渠道</label>
                                            <div class="col-lg-9">
                                                <span  style="line-height: 34px;">@Model.ChannelName</span>
    
                                                @*<input type="text" readonly="readonly" value="@Model.ChannelName" name="advertisingName" id="ChannelName" class="form-control" required placeholder="所属渠道">*@
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label style="text-align:right" class="col-lg-1 control-label"><span style="color:red">*</span> 二维码</label>
                                            <div class="col-lg-9">
                                                <a id="erweimaImg"></a>
                                                <div id="Code" style="display:none;100px;height:100px;"></div>
                                                <button type="button" style="margin-left:10px;" class="btn btn-primary" onclick="downloadClick()">下载二维码</button>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label style="text-align:right" class="col-lg-1 control-label"><span style="color:red">*</span> 推广链接:</label>
                                            <div class="col-lg-9">
                                                <span style="line-height: 34px;">@Model.advertisingUrl</span>
                                                @*<input type="text" readonly="readonly" value="@Model.advertisingUrl" name="advertisingName" id="advertisingUrl" class="form-control" required placeholder="推广链接">*@
                                            </div>
                                        </div>
                                    </div>
                                </section>
                            </div>
                        </header>
                    </section>
                </div>
            </div>
        </div>
        
    </body>
    </html>
    <script>
        //广告管理
        $(function () {
            
            $("#Code").qrcode({
               // render: "table", //table方式
                 100, //宽度
                height: 100, //高度
                text: '@Model.advertisingUrl',  //任意内容,
                correctLevel: 0
            });
    
    
            //定义方法
            function canvasToImage(canvas) {
                    var image = new Image();
                    // 指定格式 PNG 图片后缀可自定义
                    image.src = canvas.toDataURL("image/png");
                    return image;
                }
            
            //找到需要转换的canvas
            var mycanvas1 = document.getElementsByTagName('canvas')[0];
    
                //进行方法转换
                var img = canvasToImage(mycanvas1);
    
                //将转换后的img标签插入到显示容器中
            $('#erweimaImg').append(img);
    
            downloadClick = function () {
    
                    var data = $("canvas")[0].toDataURL().replace("image/png", "image/octet-stream;");//获取二维码值,并修改响应头部。
                    var filename="tupian.png";//保存的图片名称和格式,canvas默认使用的png格式。这个格式效果最好。
                    var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
                    save_link.href = data;
                    save_link.download = filename;
    
                    var event = document.createEvent('MouseEvents');
                    event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
                    save_link.dispatchEvent(event);
            }
    
        })
    
    </script>

    备注 :如有不懂,可以留言。

  • 相关阅读:
    haproxy 2.5 发布
    cube.js sql 支持简单说明
    基于graalvm 开发一个cube.js jdbc driver 的思路
    apache kyuubi Frontend 支持mysql 协议
    oceanbase 资源池删除说明
    基于obd 的oceanbase 扩容说明
    jfilter一个方便的spring rest 响应过滤扩展
    cube.js schema 定义多datasource 说明
    typescript 编写自定义定义文件
    meow 辅助开发cli 应用的工具
  • 原文地址:https://www.cnblogs.com/wangjinya/p/13426371.html
Copyright © 2011-2022 走看看