uniapp长按图片识别二维码实现

admin 2026年02月24日 08:38 104 0

uniapp实现长按图片识别二维码，需先监听图片长按事件（如@longpress），获取图片临时路径或base64数据，通过uni.scanCode结合scanType参数指定二维码识别，或使用第三方插件（如uni-qr）处理图片识别，注意跨平台兼容性，H5端可能需调用摄像头或input上传图片，微信小程序可直接使用wx.scanCode的album属性从相册选取，识别成功后，通过回调函数获取二维码内容，进行后续业务处理（如跳转链接、显示提示等），需确保图片清晰度，避免识别失败。

UniApp实现长按图片识别二维码功能，轻松搞定移动端扫码需求

在移动端应用开发中,二维码识别已成为不可或缺的功能，无论是扫描海报二维码跳转活动页面，还是识别商品二维码查看详情，都极大提升了用户体验，UniApp作为一款优秀的跨端开发框架，凭借"一套代码，多端运行"的特性，能够同时覆盖iOS、Android、H5及小程序平台，如何在UniApp中实现"长按图片识别二维码"这一实用功能呢？本文将详细拆解实现思路，提供完整代码示例，助你快速掌握这一技术要点。

长按图片识别二维码的核心逻辑可拆分为四个关键步骤：

监听长按事件：在图片组件上绑定长按事件，触发识别流程；
获取图片数据：获取长按图片的路径（网络图片需先下载到本地）；
调用二维码识别库：使用轻量级二维码识别库解析图片中的二维码内容；
处理识别结果：弹出提示或跳转至对应链接。

项目准备

创建UniApp项目

使用HBuilderX创建UniApp项目（模板选择"默认模板"），或通过CLI命令行创建，确保项目已正确配置，能够正常运行在目标平台上。

引入二维码识别库

UniApp本身不内置二维码识别功能,需借助第三方库，推荐使用jsQR库，它具有以下优势：

轻量级（仅约15KB）
纯JavaScript实现
支持H5和小程序平台
无需额外依赖

安装方式：

npm install jsqr

安装完成后,在项目中引入：

// 在需要使用的页面或组件中引入
import jsQR from 'jsqr'

核心步骤实现

步骤1：图片长按事件绑定

UniApp中,<image>组件支持@longpress事件（长按约500ms触发），可直接绑定：

<template>
  <view class="container">
    <!-- 示例图片（网络图片或本地图片） -->
    <image 
      src="/static/qrcode-demo.png" 
      mode="aspectFit" 
      @longpress="handleLongPress"
      style="width: 200px; height: 200px;"
    ></image>
  </view>
</template>

步骤2：获取图片数据

根据图片来源（网络/本地）处理数据：

本地图片：直接通过src获取绝对路径（需以开头，表示项目根目录）
网络图片：需先通过uni.downloadFile下载到临时目录，获取临时路径

// 在script中定义handleLongPress方法
export default {
  methods: {
    async handleLongPress() {
      // 1. 获取图片路径（示例为本地图片，网络图片需先下载）
      const imagePath = '/static/qrcode-demo.png' // 本地图片路径
      // 根据图片来源选择处理方式
      if (imagePath.startsWith('http')) {
        // 网络图片需要先下载
        try {
          const tempPath = await this.downloadImage(imagePath)
          await this.recognizeQRCode(tempPath)
        } catch (error) {
          uni.showToast({
            title: '图片下载失败',
            icon: 'none'
          })
        }
      } else {
        // 本地图片直接识别
        await this.recognizeQRCode(imagePath)
      }
    },
    // 下载网络图片（辅助方法）
    downloadImage(url) {
      return new Promise((resolve, reject) => {
        uni.downloadFile({
          url,
          success: (res) => {
            if (res.statusCode === 200) {
              resolve(res.tempFilePath)
            } else {
              reject(new Error('下载图片失败'))
            }
          },
          fail: reject
        })
      })
    }
  }
}

步骤3：二维码识别（核心逻辑）

不同平台（H5/小程序/App）获取图片像素数据的方式略有差异，需分别处理：

（1）H5端：通过Canvas获取像素数据

H5端可将图片绘制到Canvas,再通过ctx.getImageData()获取像素数据：

// H5端识别二维码
recognizeQRCode_H5(imagePath) {
  return new Promise((resolve, reject) => {
    const canvas = document.createElement('canvas')
    const ctx = canvas.getContext('2d')
    const img = new Image()
    img.crossOrigin = 'Anonymous' // 处理跨域问题
    img.onload = () => {
      canvas.width = img.width
      canvas.height = img.height
      ctx.drawImage(img, 0, 0, img.width, img.height)
      const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)
      const code = jsQR(imageData.data, imageData.width, imageData.height)
      if (code) {
        resolve(code.data)
      } else {
        reject(new Error('未识别到二维码'))
      }
    }
    img.onerror = () => reject(new Error('图片加载失败'))
    img.src = imagePath
  })
}

（2）小程序端：使用wx.canvasGetImageData

小程序端需使用wx.canvasGetImageData方法获取图片像素数据：

// 小程序端识别二维码
recognizeQRCode_MP(imagePath) {
  return new Promise((resolve, reject) => {
    const canvas = uni.createCanvasContext('qrcode-canvas')
    canvas.drawImage(imagePath, 0, 0, 200, 200)
    canvas.draw(false, () => {
      uni.canvasGetImageData({
        canvasId: 'qrcode-canvas',
        x: 0,
        y: 0,
        width: 200,
        height: 200,
        success: (res) => {
          const code = jsQR(res.data, res.width, res.height)
          if (code) {
            resolve(code.data)
          } else {
            reject(new Error('未识别到二维码'))
          }
        },
        fail: reject
      })
    })
  })
}

（3）App端：使用plus.io读取图片

App端可通过plus.io读取图片并转换为Base64数据：

// App端识别二维码
recognizeQRCode_App(imagePath) {
  return new Promise((resolve, reject) => {
    plus.io.resolveLocalFileSystemURL(imagePath, (entry) => {
      entry.file((file) => {
        const reader = new plus.io.FileReader()
        reader.onloadend = (e) => {
          const img = new Image()
          img.onload = () => {
            const canvas = document.createElement('canvas')
            const ctx = canvas.getContext('2d')
            canvas.width = img.width
            canvas.height = img.height
            ctx.drawImage(img, 0, 0)
            const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height)
            const code = jsQR(imageData.data, imageData.width, imageData.height)
            if (code) {
              resolve(code.data)
            } else {
              reject(new Error('未识别到二维码'))
            }
          }
          img.onerror = () => reject(new Error('图片加载失败'))
          img.src = e.target.result
        }
        reader.readAsDataURL(file)
      }, reject)
    }, reject)
  })
}

步骤4：处理识别结果

根据平台调用相应的识别方法,并处理识别结果：

// 统一的二维码识别方法
async recognizeQRCode(imagePath) {
  try {
    let result
    // #ifdef H5
    result = await this.recognizeQRCode_H5(imagePath)
    // #endif
    // #ifdef MP-WEIXIN || MP-ALIPAY
    result = await this.recognizeQRCode_MP(imagePath)
    // #endif
    // #ifdef

标签： #二维码识别