uniapp--微信小程序长按识别二维码

首先要知道,想要实现该功能,你的二维码必须是以下几种码⬇️
在这里插入图片描述
知道了这个首要条件之后,不是这几种码的就不会白费功夫了。
那么只要当你的码是这几种码就很好办了,只需要在image标签添加属性 :show-menu-by-longpress=“true” 即可,那么当不是这几种码的话,我的做法是长按保存到相册,然后再用微信扫码扫刚才保存的码。
我个人是使用l-qrcode这个组件实现的二维码展示,这个组件有个问题就是保存到相册的二维码是.png格式的,重点来了,微信扫码在相册选图片的情况下,扫不到.png格式的二维码!!
所以我的做法是,在使用l-qrcode组件生成图片二维码的时候,再对其用画布画一层白色背景,具体做法如下:

<view class="qr_code">
  <canvas
      type="2d"
      id="imageCanvas"
      style="position: absolute; left: -9999px;"
      :style="{ width: canvasWidth + 'px', height: canvasHeight + 'px' }"
  ></canvas>
  <l-qrcode
      v-show="false"
      :value="check_code"
      size="200rpx"
      useCanvasToTempFilePath
      @success="success"
  ></l-qrcode>
  <image
      v-if="processedImageUrl"
      :src="processedImageUrl"
      mode="aspectFill"
      :show-menu-by-longpress="true"
  ></image>
  <image v-else src="/static/icon/image_none.svg"></image>
</view>
const success = async (img) => {
  qr_image.value = img;
  await processImage()
};
const processImage = async () => {
  try {
    // 获取 canvas 实例
    const canvas = await new Promise((resolve) => {
      uni.createSelectorQuery()
          .select('#imageCanvas')
          .fields({node: true, size: true})
          .exec((res) => {
            resolve(res[0].node)
          })
    })

    const ctx = canvas.getContext('2d')

    // 创建图片对象
    const img = canvas.createImage()

    // 加载图片
    await new Promise((resolve, reject) => {
      img.onload = resolve
      img.onerror = reject
      img.src = qr_image.value
    })

    // 设置画布尺寸
    canvas.width = img.width
    canvas.height = img.height
    canvasWidth.value = img.width
    canvasHeight.value = img.height

    // 填充白色背景
    ctx.fillStyle = 'white'
    ctx.fillRect(0, 0, canvas.width, canvas.height)

    // 绘制图片
    ctx.drawImage(img, 0, 0)

    // 转换为临时文件路径
    const tempFilePath = await new Promise((resolve, reject) => {
      uni.canvasToTempFilePath({
        canvas,
        success: (res) => resolve(res.tempFilePath),
        fail: reject
      })
    })

    processedImageUrl.value = tempFilePath
  } catch (error) {
    console.error('处理图片失败:', error)
  }
}

这样就可以实现长按保存到相册,然后再用微信扫码扫刚才保存的码啦 🎉🎉

UniApp是一个基于Vue.js的跨平台框架,它允许开发者编写一次代码,生成iOS、Android、Web等多端应用。在微信小程序中,虽然原生不支持直接提供按图片识别二维码的功能,但你可以通过集成第三方库或者自定义组件的方式来实现这个需求。 一种常见的做法是使用JavaScript API来模拟按事件,然后调用微信JSSDK中的`scanCodeScanner`接口,让用户手动触发扫描二维码的过程。例如,你可以创建一个自定义组件,当用户按时显示提示,并调用扫码功能: ```html <template> <view class="custom-image" @touchstart="onTouchStart" @touchend="onTouchEnd"> <image :src="imageUrl" /> </view> </template> <script> import wx from '@ uni-app/core/util/wx'; export default { methods: { onTouchStart(e) { this.showScanPrompt(); }, onTouchEnd(e) { // 如果用户松开手指,取消扫描提示并开始扫描 this.hideScanPrompt(); wx.scanCode({ needResult: 'auto', // 默认为自动检测是否扫描成功 scanType: ['qrCode', 'barCode'], // 可以同时扫二维码和条形码 success(res) { console.log('扫码结果:', res.resultStr); // 打印扫描到的二维码内容 } }); }, showScanPrompt() { // 显示扫描提示 }, hideScanPrompt() { // 隐藏扫描提示 }, }, data() { return { imageUrl: 'your_image_url' }; } }; </script> ``` 请注意,你需要先在小程序管理后台配置相应的JSAPI权限。同时,由于微信小程序的隐私政策限制,这种方式并不适用于直接在页面上识别,通常建议引导用户去其他地方完成扫描操作,如点击一个按钮跳转至新的界面。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值