二維碼的生成-QRCode.js
阿新 • • 發佈：2020-08-03
一、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>
備註 :如有不懂，可以留言。