用qrcode.js写的生成二维码和下载这个二维码

时间 2021-01-10

实在是不想用网上的生成二维码，就自己写了个简单的生成和下载的功能

先看一下效果：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ko" lang="ko">

   <head>
       <title>生成二维码</title>
       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
       <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
       <script type="text/javascript" src="js/jquery.min.js"></script>
       <script type="text/javascript" src="js/qrcode.js"></script>
       <style type="text/css">
           .md-content {
               height: 80vh;
           }

           .md-center {
               display: flex;
               justify-content: center;
               align-items: center;
           }

           .md-pos {
               flex: 1;
               display: grid;
           }

           .md-qrcode-btn {
               width: 30%;
               height: 5vh;
               margin: auto;
               margin-top: 1vh;
           }

           .md-qrcode-img {
               width: 300px;
               height: 300px;
               margin: auto;
               margin-top: 15px;
           }
       </style>
   </head>

   <body>
       <div class="md-content md-center">
           <div class="md-pos">
               <textarea id="qrcodeinput" rows="7" cols="56" placeholder="请输入文字内容"></textarea>
               <button onclick="onGeQRCode()" class="md-qrcode-btn">生成二维码</button>
           </div>
           <div class="md-pos">
               <div id="qrcode" class="md-qrcode-img md-center"></div>
               <button class="md-qrcode-btn" onclick="downloadIamge()">下载</button>
           </div>
       </div>
       <script type="text/javascript">
           var qrcode = new QRCode(document.getElementById("qrcode"), {
               width: 256,
               height: 256,
               colorDark: '#000000', //前景色
               colorLight: '#ffffff', //背景色
               correctLevel: QRCode.CorrectLevel.H //容错级别，可设置为：QRCode.CorrectLevel.L QRCode.CorrectLevel.M QRCode.CorrectLevel.Q QRCode.CorrectLevel.H
           });

           function makeCode(val) {
               qrcode.makeCode(val);
           }

           //生成二维码
           function onGeQRCode() {
               let _val = document.getElementById("qrcodeinput").value;

if(_val.trim() == '') { alert('请输入内容！！！'); return } makeCode(_val); } //下载二维码 function downloadIamge() { var imgs = document.getElementById("qrcode").getElementsByTagName("img") var a = document.createElement('a') a.download = 'xds' + new Date().getTime() || '下载图片名称' a.href = imgs[0].src document.body.appendChild(a); a.click(); document.body.removeChild(a); } </script> </body>