uni-app无法前端直接识别页面二维码，因各端canvas均禁止读取原始像素：H5受CORS限制、小程序无getImageData接口、App端Webview屏蔽像素访问；唯一可行路径是长按→下载→保存→相册调用uni.scanCode识别，H5需降级为截图提示或文件上传。

uni-app 无法在前端直接识别页面中 标签所展示的二维码——这不是代码写法问题，而是各端环境根本禁止读取原始图像像素。

为什么 ctx.getImageData 总是报错或返回 null

所有试图用 jsqr、qrcode.js 或 canvas 截图后解码的方案，都会卡在这一步：

• H5 端：加载本地 tempFilePath 或跨域图片会触发 CORS，getImageData 被浏览器直接拦截
• 微信小程序：不开放 getImageData 接口，调用即报 Unable to get image data from canvas
• App（iOS/Android）：Webview 内核屏蔽像素读取，且无原生桥接能力供 JS 访问图像数据

show-menu-by-longpress="true" 不生效的三大硬性条件

这个属性只是“申请特权”，是否弹出“识别图中二维码”菜单，取决于平台审核。必须同时满足：

uni-app

uni-app 是基于 Vue 的跨端开发框架，适合开发 H5、App、小程序、鸿蒙和多端业务应用。

下载

• 图片 src 必须是公网可访问的 HTTPS 直链（如 https://cdn.example.com/qrcode.png），/static/ 或 base64 地址 100% 失效
• 图片尺寸建议 ≥ 300×300 px，边缘留白充足，避免压缩模糊
• 不能是临时路径（如 uni.downloadFile 返回的 tempFilePath），微信不认作“可识别来源”

真正能落地的唯一路径：长按 → 下载 → 保存 → 相册识别

绕不开相册，但这是全端唯一可行链路。核心流程和关键点：

• 监听 @longpress，拿到图片 URL（确保服务端已配 Access-Control-Allow-Origin）
• 用 uni.downloadFile 拉取，再调 uni.saveImageToPhotosAlbum（App 端需提前申请 scope.writePhotosAlbum）
• 最后调 uni.scanCode({ sourceType: 'album', scanType: ['qrCode'] }) 唤起相册识别
• H5 端必须降级：只能提示“请截图后用微信扫描”，或改用 上传识别

最容易被忽略的是：H5 和小程序混用 uni.scanCode 时，H5 端固定进 fail 回调，错误信息永远是 not supported。不加平台判断就直接调用，上线后用户在浏览器里点一下就静默失败，连 fallback 都没有。