jQuery二维码生成和扫描解析

生成二维码

html代码

<div style="width:360px;height:360px;">
    <h2 style="margin-left: 50px;">生成二维码</h2>
    <input id="text" type="text" value="https://www.awesomes.cn" /><button id="button">生成二维码</button><br />
    <div id="qrcode"></div>
</div>

js代码

<script type="text/javascript">
    var qrcode = new QRCode("qrcode");
    // 生成二维码的方法
    function makeCode () {     
        // 二维码地址 
        var Url = document.getElementById("text");
        if (!Url.value) {
            alert("请输入生成二维码的地址");
            Url.focus();
            return;
        }
        qrcode.makeCode(Url.value);
    }
    makeCode();
    // 点击生成二维码
    $("#button").
    on("click", function () {
        makeCode();
    })
</script>

解析二维码

html代码

<div style="width:360px;height:360px;">
    <h2 style="margin-left: 30px;">解析二维码</h2>
    <input type="file" id="newfile" onchange="changepic(this)"></br>
    <img src="jx.png" id="img" />
    <h4>二维码地址:<span id="spantitle"></span></h4>
</div>

js代码

<script type="text/javascript">
    // 解析
    var newfile = document.getElementById('newfile');
    var getObjectURL = function (file) {
        var url = null;
        if (window.createObjectURL != undefined) { // basic
          url = window.createObjectURL(file);
        } else if (window.URL != undefined) { // mozilla(firefox)
        url = window.URL.createObjectURL(file);
        } else if (window.webkitURL != undefined) { // webkit or chrome
          url = window.webkitURL.createObjectURL(file);
        }
        return url;
    }

    newfile.onchange = function () {
      // 显示图片
      var reads = new FileReader();
      f = document.getElementById('newfile').files[0];
      reads.readAsDataURL(f);
      reads.onload = function(e) {
      document.getElementById('img').src = this.result;
      $("#img").css("display", "block");
      };
        //   console.log(newfile[0]);
        console.log(getObjectURL(this.files[0]));// newfile[0]是通过input file上传的二维码图片文件
        qrcode.decode(getObjectURL(this.files[0]));
        qrcode.callback = function (imgMsg) {
            // 获取地址传给span
            var divA = document.getElementById("spantitle");
            divA.innerHTML = divA.innerHTML+ imgMsg;
        }
    }
</script>
更新时间 2020-04-09 15:29:34,本资源已通过Awesomes审核检验,请放心使用!
如下载遇到问题,请联系客服解决
下载地址
此插件下载需要0A币,请登录后进行下载。
请文明评论,与人为善,比聪明更重要!
评论