可行路径唯一：长按图片→下载保存至相册→调用uni.scanCode({sourceType:'album',scanType:['qrCode']})识别；因各端canvas均无法获取图像像素数据，纯前端解析不可行。
uni-app 中长按图片触发识别二维码的可行路径
原生 WebView 不支持直接从 <image></image> 标签中提取像素数据，uni-app 的 canvas 也不支持跨域图片读取（包括本地临时路径 tempFilePath），所以「长按页面上任意 <image></image> 直接扫码」在纯前端无法实现。真正能走通的路径只有一条：**把图片先保存到本地相册或转为 base64，再用 uni.scanCode 的 scanType: ['qrCode'] + sourceType: 'album' 主动唤起相册选图识别**。
为什么不能直接 canvas getImageData 或 useWorker 解析？
uni-app 的 canvas 在各端限制差异大：
– H5 端受限于 CORS，drawImage 加载本地 tempFilePath 会失败；
– 微信小程序虽支持 canvas.toTempFilePath，但不开放 getImageData 接口；
– App 端（iOS/Android）Webview 内核对 canvas 像素读取有策略屏蔽，且无对应原生桥接能力。
所有尝试绕过相册、纯 JS 解析图片二维码的方案，最终都会卡在「拿不到原始图像数据」这一步。
常见错误现象：
– 调用 ctx.getImageData 报错 Unable to get image data from canvas；
– uni.canvasToTempFilePath 返回空路径或黑图；
– 使用第三方库如 jsqr 传入 canvas 后始终返回 null。
正确做法：长按 → 保存 → 相册识别（含兼容处理）
核心逻辑是：拦截长按事件 → 获取图片 URL（需确保可访问）→ 用 uni.downloadFile 拉取 → uni.saveImageToPhotosAlbum 保存 → uni.chooseImage 或 uni.scanCode 唤起识别。
- 微信小程序必须用
uni.scanCode({ sourceType: 'album', scanType: ['qrCode'] })，不能用chooseImage+ 自解析（没权限） - H5 端不支持相册扫码，只能降级为「复制图片链接」或提示「请手动截图后使用微信扫码」
- App 端（iOS/Android）可用
uni.scanCode的 album 模式，但需提前申请permission.writePhotosAlbum - 图片 URL 必须可跨域（服务端需配
Access-Control-Allow-Origin），否则downloadFile失败
简短示例（关键片段）：
onLongPress() {
uni.showLoading({ title: '识别中...' });
uni.downloadFile({
url: this.imgUrl,
success: (res) => {
if (res.statusCode === 200) {
uni.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: () => {
uni.scanCode({
sourceType: 'album',
scanType: ['qrCode'],
success: (scanRes) => {
console.log('识别结果:', scanRes.result);
},
fail: (err) => {
// 用户取消或未识别到
if (err.errMsg?.includes('cancel')) return;
uni.showToast({ title: '识别失败', icon: 'none' });
}
});
}
});
}
},
fail: () => {
uni.showToast({ title: '下载失败，请检查网络', icon: 'none' });
}
});
}
容易被忽略的细节和坑点
– uni.scanCode 在微信小程序中，sourceType: 'album' 仅支持识别相册中已存在的图，**不会自动打开刚保存的那张图**，用户必须手动点选——这是设计限制，不是 bug；
– App 端调用 saveImageToPhotosAlbum 后，部分 Android 机型（尤其华为）相册缓存延迟，可能导致刚保存的图在相册里“找不到”，建议加 setTimeout 延迟 300ms 再唤起 scanCode；
– 图片尺寸过大（如 >5MB）时，downloadFile 可能超时，需设置 timeout: 30000 并捕获 fail: { errMsg: 'downloadFile:fail timeout' }；
– 微信小程序基础库 2.27.0+ 才支持 scanCode 的 sourceType: 'album'，低版本需提示升级。
最麻烦的一环其实是「图片来源不可控」：用户长按的可能是网络图、base64 图、uni.chooseImage 选的临时路径图，甚至跨域资源。每种来源都要单独适配，没有银弹方案。
