纯前端在uni-app中无法直接识别页面二维码，因各端canvas均无法获取原始像素数据；正确路径是长按→下载→保存→相册扫码，h5需降级为截图提示或文件上传。
纯前端在 uni-app 里无法直接检测并识别页面中 <image></image> 的二维码——这不是代码没写对，而是各端 canvas 均拿不到原始像素数据，根本无从解码。
为什么 ctx.getImageData 总是报错或返回 null
uni-app 的 canvas 在不同平台有硬性限制：
- H5 端：加载本地
tempFilePath或跨域图片会触发 CORS 错误，getImageData直接被浏览器拦截 - 微信小程序：支持
canvas.toTempFilePath，但不开放getImageData接口，调用即报Unable to get image data from canvas - App（iOS/Android）：Webview 内核屏蔽像素读取，且没有原生桥接能力供 JS 访问图像数据
所有试图用 jsqr、qrcode.js 或自建 worker 解析页面图片的方案，都会卡在这一步。不是库不行，是环境不让。
show-menu-by-longpress 能用的前提是什么
这个属性只是“申请特权”，是否生效取决于平台审核，关键条件有三个：
- 图片必须是 HTTPS 网络地址（如
https://xxx.com/qrcode.png），/static/下的本地路径几乎 100% 失效 - 图片需清晰、无严重压缩、边距留白充足，建议最小尺寸 ≥ 300×300 px
- 不能是 base64 字符串或临时路径（
tempFilePath），否则微信不认作“可识别来源”
加了 :show-menu-by-longpress="true" 却没弹出菜单？先检查控制台有没有 “invalid src” 或 “not allowed” 类型警告，再确认图片 URL 是否满足上述三点。
真正能落地的识别路径：下载 → 保存 → 相册扫码
绕不开相册，但这是唯一全端可行链路。核心流程是：
- 监听长按事件（
@longpress），拿到图片 URL - 用
uni.downloadFile拉取图片（注意服务端需配Access-Control-Allow-Origin） - 调用
uni.saveImageToPhotosAlbum保存（App 端需提前申请permission.writePhotosAlbum） - 最后用
uni.scanCode({ sourceType: 'album', scanType: ['qrCode'] })唤起相册识别
H5 端必须降级：无法唤起相册扫码，只能提示“请截图后用微信扫描”，或改用 <input type="file" accept="image/*"> 手动上传识别。
别踩坑：H5 和小程序混用 uni.scanCode 的陷阱
uni.scanCode 在 H5 完全不执行，调用后立刻进 fail 回调，错误信息固定为 not supported。常见错误写法：
- 没做平台判断就直接调用，导致 H5 报错且无 fallback
- 给 H5 传
scanType、onlyFromCamera等参数——这些参数在 H5 里全是无效的 - 误以为
uni.chooseImage+ 第三方解码库能替代，结果因 canvas 限制失败
正确做法是用 uni.getSystemInfoSync().platform 显式区分平台，H5 单独引入 html5-qrcode 或降级为文件上传。
最易被忽略的一点：微信小程序要求 manifest.json 中 mp-weixin 节点下必须声明 permission，否则即使用户点了允许，后续调用 uni.scanCode 仍可能静默失败。别只盯着代码逻辑，配置文件漏一行，整个链路就断了。
