二维码的生成-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;width:auto;">
                                            <div class="layui-form-item">
                                                <label class="layui-form-label " style="width: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;width: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方式
            width: 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>
复制代码

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

posted @   锦大大的博客呀！  阅读(1032)  评论(0)  编辑  收藏  举报
编辑推荐：
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行：
· TypeScript + Deepseek 打造卜卦网站：技术与玄学的结合
· 阿里巴巴 QwQ-32B真的超越了 DeepSeek R-1吗？
· 【译】Visual Studio 中新的强大生产力特性
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 【设计模式】告别冗长if-else语句：使用策略模式优化代码结构
点击右上角即可分享
微信分享提示
AI IDE Trae