qrcode-decoder 二维码解码兼容性强,支持中文url内容

作者: tww844475003 分类: 前端开发 发布时间: 2021-05-22 16:03
<!DOCTYPE html>
<html>
        <head>
                <meta charset="utf-8">
                <title>二维码解码</title>
        </head>
  <script src="index.aio.min.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 qr = new QrcodeDecoder();
      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]));

        var code = qr.decodeFromImage(getObjectURL(this.files[0]))
        alert("二维码解析:" + code.data);
        window.open(code.data)
      }
      
      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';
        
        var code2 = qr.decodeFromImage(awmUrl, {crossOrigin: "anonymous"})
        alert("二维码解析:" + code2.data);
        window.open(code2.data)
      }
    </script>
        </body>
</html>

vue应用

<template>
  <div class="qrcode">
    <br /><br /><br /><br />
    <h1>二维码解码</h1><br /><br /><br />
    <input type="file" ref="referenceUpload" @change="fileChange" /><br />
    <img :src="imgSrc" /><br /><br />
    <button @click="decodeFn">解码</button>
  </div>
</template>

<script>
import QrCode from 'qrcode-decoder'

export default {
  data() {
    return {
      eventFile: '',
      imgSrc: ''
    }
  },
  methods: {
    fileChange() {
      const eventFile = this.$refs.referenceUpload.files[0]
      const awmUrl = this.getObjectURL(eventFile)

      this.imgSrc = awmUrl
      this.eventFile = eventFile
    },
    getObjectURL(file) {
      return window.URL && window.URL.createObjectURL ? window.URL.createObjectURL(file) : window.webkitURL.createObjectURL(file)
    },
    decodeFn() {
      const qr = new QrCode()

      qr.decodeFromImage(this.imgSrc).then(res => {
        console.log(res.data)
        alert('二维码解析:' + res.data)
        window.open(res.data)
      })
    }
  }
}
</script>
前端开发那点事
微信公众号搜索“前端开发那点事”

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

发表评论

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