使用jsqr解析二维码

_Jessica.

已于 2023-06-15 16:16:12 修改

阅读量3.1k

点赞数

分类专栏： vue.js 文章标签： elementui vue.js javascript

于 2022-09-22 17:05:27 首次发布

本文链接：https://blog.csdn.net/fsj0522/article/details/124980802

版权

vue.js 专栏收录该内容

9 篇文章

订阅专栏

使用jsqr识别二维码

1、vue

使用画布

<el-form-item
  label="设备识别码"
  prop="deviceSerialNo"
  class="position:relative"
>
  <dataInput
    v-if="qrFlag"
    v-model.trim="form.deviceSerialNo"
    :placeholder="$t('lang.pleaseInput')"
    :clearable="false"
    maxlength="32"
  />
  <el-upload
    ref="uploadQr"
    action=""
    :show-file-list="false"
    :http-request="successFnQr"
    class="img-upload"
  >
    <img
      :src="require('@/modules/authMng/assets/scaner.png')"
      alt=""
      style="vertical-align: middle;"
    >
  </el-upload>
  <canvas
    id="myCanvas"
    width="600"
    height="600"
    style="display: none"
  />
</el-form-item>

2、js

引入jsqr，上传成功后解析二维码

import jsqr from 'jsqr'

data () {
    return {
      fileListQr: [],
      qrFlag: true,
      qrcode: ''
    }
},
methods: {
    successFnQr (event) {
      const isJPG = event.file.type === 'image/jpeg'
      const isPNG = event.file.type === 'image/png'
      const flag = Boolean(!isJPG && !isPNG)
      if (flag) {
        this.form.deviceSerialNo = ''
        this.error('只能上传 JPG(JPEG) / PNG 格式!')
        return
      }
      // jsqr解析二维码
      var img = new Image()
      var reader = new FileReader()
      reader.readAsDataURL(event.file)
      let _this = this
      reader.onload = function (e) {
        img.src = e.target.result
        var myCanvas = document.getElementById('myCanvas')
        var myCanvaswd = myCanvas.getContext('2d')
        img.onload = function () {
          myCanvaswd.drawImage(img, 0, 0, 600, 600)
          var imageData = myCanvaswd.getImageData(0, 0, 600, 600)
          var picData = {}
          picData = jsqr(imageData.data, imageData.width, imageData.height, {
            inversionAttempts: 'dontInvert'
          })
          if (picData && picData.data) {
            _this.form.deviceSerialNo = picData.data
            _this.$refs.form.validateField(`deviceSerialNo`)
            _this.success('识别二维码成功!')
          } else {
            _this.form.deviceSerialNo = ''
            _this.error('识别二维码失败，请重新上传')
          }
          _this.qrFlag = false
          _this.$nextTick(() => {
            _this.qrFlag = true
          })
        }
      }
}

3、css

.img-upload {
  position: absolute;
  height: 30px;
  width: 30px;
  margin-top: -30px;
  margin-left: 94%;
  cursor: pointer;
}

4、效果图

jsqr的解析参数

imageData：要解析的图像数据。
imageWidth：图像的宽度。
imageHeight：图像的高度。
threshold：阈值，用于控制二维码的识别精度。默认值为128。threshold 的数值越大，意味着需要更暗的像素才能被识别为黑色区域，因此可能会导致更多的噪点被误判为白色区域。相反，如果 threshold 的数值太小，那么可能会将一些本应识别为白色区域的像素误判为黑色区域，从而影响扫描结果。
inversionAttempts：反转尝试次数，用于解决颜色反转问题。默认值为1。
resultSize：解析结果大小，用于限制解析出的二维码大小。默认值为-1，表示不限制大小。
debug：是否开启调试模式，开启后会输出更多信息以帮助调试。