js自动实现读取二维码内容_js中怎么获取二维码信息

作者：weixin_40725706 | 2024-05-16 01:10:13

踩

js中怎么获取二维码信息

js自动实现读取二维码内容

<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title>图片二维码识别</title>
  <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://cozmo.github.io/jsQR/jsQR.js"></script>
</head>

<body>
  <span lan_id="bc">选择图片</span> <input type="file" id="pictureChange" />
  <div>
    <h2>识别结果：</h2>
    <ul id="result">
    </ul>
  </div>
</body>
<script type="text/javascript">
  $("body").append('<canvas id="qrcanvas" style="display:none;"></canvas>')
  $("#pictureChange").change(function (e) {
    var file = e.target.files[0]
    if (window.FileReader) {
      var fr = new FileReader()
      fr.readAsDataURL(file)
      fr.onloadend = function (e) {
        var base64Data = e.target.result
        base64ToqR(base64Data)
      }
    }
  })
  function base64ToqR (data) {
    var c = document.getElementById("qrcanvas")
    var ctx = c.getContext("2d")

    var img = new Image()
    img.src = data
    img.onload = function () {
      $("#qrcanvas").attr("width", img.width)
      $("#qrcanvas").attr("height", img.height)
      ctx.drawImage(img, 0, 0, img.width, img.height)
      var imageData = ctx.getImageData(0, 0, img.width, img.height)
      const code = jsQR(imageData.data, imageData.width, imageData.height, {
        inversionAttempts: "dontInvert",
      })

      console.log(code.data, 'code.data')
      if (code) {
        showCode(code.data)
      } else {
        alert("识别错误")
      }
    }
  }
  function showCode (code) {
    $("#result").append("<li>" + code + "</li>")
  }
</script>

</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60

就解决了

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/weixin_40725706/article/detail/575984