一、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>
备注 :如有不懂，可以留言。