react+antd解析图片中的二维码

react+antd解析图片中的二维码：

突然接手一个 15版本的react

---

问题描述

提示：这里描述项目中遇到的问题：

上传文件时候要求识别文件中的二维码、 支持png pdf，通过上传后的file识别二维码信息

  <Upload
                    type="drag"
                    {...this.uploadProps}
                    ref={(ref) => (this.uploadRef = ref)}
                  >
                    <div className="ant-upload-drag-icon">
                      <AddIcon />
                    </div> 
                    <p className="ant-upload-text" style={{ fontWeight: 600 }}>
                      点击或拖拽批量上传图像
                    </p>
                  </Upload>

---

解决方案：

先安装 所需要用到的包
npm install pdfjs-dist --save（v1.9.426）
npm install jsqr --save

//项目中引用
import QRCode from 'jsqr'
import pdfjsLib from 'pdfjs-dist'


const decodeQRCodeFromImageData = (imageData)=> {
  const { data, width, height } = imageData;
  const code = QRCode(data, width, height);
  return code ? code.data : null;
}
const extractQRCodesFromPDF = (pdfData) => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsDataURL(pdfData)
    console.log(pdfData, 'pdfData')
    reader.onload = (event) => {
      const fileData = event.target.result
      const pdf = pdfjsLib.getDocument(fileData).then((pdf) => {
        const qrCodes = []
        const numPages = pdf.numPages
        const pagePromises = []
        for (let i = 1; i <= numPages; i++) {
          pagePromises.push(pdf.getPage(i))
        }
        Promise.all(pagePromises).then((pages) => {
          pages.forEach((page) => {
            const viewport = page.getViewport(1)
            const canvas = document.createElement('canvas')
            const context = canvas.getContext('2d')

            canvas.width = viewport.width
            canvas.height = viewport.height

            const renderContext = {
              canvasContext: context,
              viewport: viewport,
            }

            page.render(renderContext).then(() => {
              const imageData = context.getImageData(
                0,
                0,
                canvas.width,
                canvas.height,
              )
              const decodedQRCode = decodeQRCodeFromImageData(imageData)

              if (decodedQRCode) {
                qrCodes.push(decodedQRCode)
              }

              if (qrCodes.length > 0) {
                console.log('扫描结果:', qrCodes)
                resolve (qrCodes[0])
              }
            })
          })
        })
      })
      
    }
  })
}

const extractQRCodesFromPNG = (file) => {
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.readAsDataURL(file)
    reader.onload = (event) => {
      const image = new Image()
      image.src = event.target.result
      image.onload = () => {
        const canvas = document.createElement('canvas')
        const ctx = canvas.getContext('2d')
        canvas.width = image.width
        canvas.height = image.height
        ctx.drawImage(image, 0, 0, image.width, image.height)
        const imageData = ctx.getImageData(0, 0, image.width, image.height)
        const qrCode = QRCode(imageData.data, image.width, image.height)
        console.log(qrCode, 'qrCode')
        let data = qrCode ? qrCode.data : ''
        resolve(data)
      }
    }
  })
}
export const readerQrcode = (file, type) => {
  return new Promise((resolve, reject) => {
    if (type == 'application/pdf') {
      extractQRCodesFromPDF(file).then((res) => {
        console.log(res, 'pdf')
        resolve(res)
      })
    } else {
      extractQRCodesFromPNG(file).then((res) => {
        console.log(res, 'resres')
        resolve(res)
      })
    }
  })
}
  


//页面引用即可
   readerQrcode(file).then((val) => { 
 })

pdf要兼容ie浏览器 更换版本pnpm install pdfjs-dist@2.1.266

	import workerSrwo from 'pdfjs-dist/build/pdf.worker.entry'
	pdfjsLib.GlobalWorkerOptions.workerSrc = workerSrwo 
	pdfjsLib.GlobalWorkerOptions.disableWorker = true
	
	const reader = new FileReader()
    reader.readAsArrayBuffer(pdfData) //转哈
    reader.onload = (event) => {
      console.log(event, 'event')
      const fileData = event.target.result
      const rawArray = new Uint8Array(fileData) //转化
      const  RenderTask = pdfjsLib.getDocument(rawArray) //传值
      RenderTask.promise//使用就好了

完