使用javascript解析二维码的三种方式

使用 JavaScript 解析二维码的三种方式

二维码已经成为我们生活中不可缺少的一部分，我们可以通过扫描二维码获取网址、商品信息等内容。而 JavaScript 是一种非常方便的语言，可以帮助我们解析二维码。下面介绍三种使用 JavaScript 解析二维码的方式。

1. 使用ZXing Library解析二维码

ZXing 是 Google 开源的一个条形码、二维码扫描和识别库。它不仅支持二维码，还支持其他常见的一维码格式。使用这个库可以非常方便地扫描并解析二维码，下面是一个示例：

//导入ZXing的core.js和jsQR.js
<script src="https://rawgit.com/zxing-js/library/master/dist/zxing.min.js"></script>
<script src="https://raw.githubusercontent.com/cozmo/jsQR/master/dist/jsQR.min.js"></script>

// 将图片路径传入，返回识别出来的内容
function decodeUrl(url) {
  // 创建一个 Image 对象
  let img = new Image()
  img.src = url

  // 创建一个 canvas 对象
  let canvas = document.createElement('canvas')
  let ctx = canvas.getContext('2d')

  // 等待 Image 加载完毕
  return new Promise((resolve, reject) => {
    img.onload = () => {
      // 设置画布大小，并将 Image 绘制到画布上
      canvas.width = img.width
      canvas.height = img.height
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height)

      // 从画布上读取二维码的数据
      let imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)
      let qr = jsQR(imageData.data, imageData.width, imageData.height)

      // 如果识别出二维码，则返回二维码的内容
      if (qr) {
        resolve(qr.data)
      } else {
        reject('无法识别二维码')
      }
    }
  })
}

// 测试代码：
decodeUrl('https://www.baidu.com/img/bd_logo1.png').then((data) => {
  console.log(data)
}).catch((err) => {
  console.log(err)
})

2. 使用 qrcode-decoder 库解析二维码

qrcode-decoder 是一个基于 JavaScript 的二维码识别库，支持多种格式的二维码和码型识别。下面是一个示例：

//导入qrcode-decoder.js文件
<script src="https://cdn.bootcdn.net/ajax/libs/qrcode-decoder/1.0.0/qrcode-decoder.min.js"></script>

// 将图片路径传入，返回识别出来的内容
function decodeUrl(url) {
  // 创建一个 Image 对象
  let img = new Image()
  img.src = url

  // 创建一个 canvas 对象
  let canvas = document.createElement('canvas')
  let ctx = canvas.getContext('2d')

  // 等待 Image 加载完毕
  return new Promise((resolve, reject) => {
    img.onload = () => {
      // 设置画布大小，并将 Image 绘制到画布上
      canvas.width = img.width
      canvas.height = img.height
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height)

      // 创建一个 qrcode-decoder 实例并获取二维码的内容
      let qr = new QrCode()
      qr.callback = (result) => {
        if (result instanceof Error) {
          reject('无法识别二维码')
        } else {
          resolve(result)
        }
      }
      qr.decode(canvas.toDataURL())
    }
  })
}

// 测试代码：
decodeUrl('https://www.baidu.com/img/bd_logo1.png').then((data) => {
  console.log(data)
}).catch((err) => {
  console.log(err)
})

3. 使用 QuaggaJS 库解析二维码

QuaggaJS 是一个用于识别条形码和二维码的 JavaScript 库，它可应用于 Web 应用中以及 Node.js 环境中。QuaggaJS 使用的是一种称为“背景统计的二进制模式识别”（背景下的局部二值化算法）来识别图像中的条码。下面是一个示例：

//导入QuaggaJS的文件
<script src="https://cdn.jsdelivr.net/npm/quagga/dist/quagga.min.js"></script>

// 将图片路径传入，返回识别出来的内容
function decodeUrl(url) {
  // 创建一个 Image 对象
  let img = new Image()
  img.src = url

  // 创建一个 canvas 对象
  let canvas = document.createElement('canvas')
  let ctx = canvas.getContext('2d')

  // 等待 Image 加载完毕
  return new Promise((resolve, reject) => {
    img.onload = () => {
      // 设置画布大小，并将 Image 绘制到画布上
      canvas.width = img.width
      canvas.height = img.height
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height)

      // 初始化 QuaggaJS 配置
      Quagga.init({
        inputStream: {
          type: 'ImageStream',
          sequence: false,
          size: 800,
          src: canvas.toDataURL()
        },
        decoder: {
          readers: ['ean_reader', 'code_128_reader']
        },
        locate: true,
        debug: false,
        numOfWorkers: 0,
        locate: true,
        multiple: false
      }, (err) => {
        // 如果出错，则返回错误信息
        if (err) {
          reject(err)
        } else {
          // 启动 QuaggaJS 并识别二维码
          Quagga.start()
          Quagga.onDetected((result) => {
            resolve(result.codeResult.code)
          })
        }
      })
    }
  })
}

// 测试代码：
decodeUrl('https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1591575544287&di=d14323aa555d84350253cea9ac8e3c08&imgtype=0&src=http%3A%2F%2Fimg03.sogoucdn.com%2Fapp%2Fa%2F000500B4E59D3A31E82000028741C7E4')                 .then((data) => {
  console.log(data)
}).catch((err) => {
  console.log(err)
})

以上，就是三种使用 JavaScript 解析二维码的方式，如有不足之处，请指正！