reqrcode.js 二维码解码

作者: tww844475003 分类: 前端开发 发布时间: 2021-05-22 15:27
<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8">
                <title>二维码解码</title>
        </head>
  <script src="reqrcode.js"></script>
  <style type="text/css">
    .qrcode-box {
      padding: 20px;
      width: 1000px;
      margin: 0 auto;
    }
    .qrcode-box .btn {
      width: 160px;
      height: 60px;
      line-height: 60px;
      font-size: 20px;
      cursor: pointer;
      font-weight: bold;
    }
  </style>
        <body>
    <div class="qrcode-box">
      <h2>二维码解码</h2>
      <input type="file" id="selectFile">
      <br />
      <br />
      <hr />
      <h2>二维码解码</h2>
      <img src="./awm.png" />
      <br />
      <button class="btn" onclick="reqrcodeFn()">解码</button>
    </div>
    
    <script>
      var selectFile = document.getElementById('selectFile');
      var getObjectURL = function(file) {
        return window.URL && window.URL.createObjectURL ? window.URL.createObjectURL(file) : window.webkitURL.createObjectURL(file);
      }
      selectFile.onchange = function() {
        console.log(getObjectURL(this.files[0]));
        qrcode.decode(getObjectURL(this.files[0]));
        qrcode.callback = function(url) {
          alert("二维码解析:" + url);
          window.open(url)
        }
      }
      
      function reqrcodeFn() {
        var awmUrl = 'https://qr.api.cli.im/newqr/create?data=https%3A%2F%2Fwww.ifrontend.net%2F&level=H&transparent=0&bgcolor=%23FFFFFF&forecolor=%23000000&blockpixel=12&marginblock=2&logourl=https%3A%2F%2Fncstatic.clewm.net%2Ffree%2F2020%2F1021%2F21%2F5efb033f1cd6d67693dbe30bdfc432a1.png&size=260&logoshape=rect&eye_use_fore=1&qrcode_eyes=null&outcolor=%23000000&incolor=%23000000&qr_rotate=0&text=&fontfamily=simsun.ttc&fontsize=30&fontcolor=%23000000&logo_pos=0&kid=bizcliim&time=1603288062&key=c5fc80f7ff604a85aff6131f78cf84bc';
        
        qrcode.decode(awmUrl);
        qrcode.callback = function(url) {
          alert("二维码解析:" + url);
          window.open(url)
        }
      }
    </script>
        </body>
</html>
前端开发那点事
微信公众号搜索“前端开发那点事”

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

发表回复

您的电子邮箱地址不会被公开。 必填项已用 * 标注