uniapp+vue2——微信小程序实现选择图片识别二维码功能

说明

1、安装

npm i -d jsqr

2、代码

<!-- 输入框 -->
<view class="inputBox">
	<input type="text" placeholder="输入设备编号" v-model="sn" />
	<view class="confirm" @click="confirm">确认</view>
</view>
<view class="chooseImg">
	<view class="chooseBtn" @click="chooseImage">
		<image src="/static/images/chooseImg.png" mode="aspectFill"></image>
		<canvas style="position: fixed;top: -1000000px;" id="qrcodeCanvas" canvas-id="qrcodeCanvas"
			:style="{width:canvasWidth+'px', height:canvasHeight+'px'}"></canvas>
	</view>
	<view class="chooseTxt">请选择图片</view>
</view>

.inputBox {
	margin: 28rpx;
	background: rgba(255, 255, 255, 0.79);
	border-radius: 15rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 23rpx 25rpx 23rpx 30rpx;

	input {
		font-size: 30rpx;
		color: #464646;
		margin-right: 20rpx;
		width: 100%;
	}

	.confirm {
		font-weight: bold;
		flex-shrink: 0;
		width: 126rpx;
		height: 54rpx;
		background: rgba(1, 92, 125, 0.79);
		border-radius: 27rpx;
		font-size: 26rpx;
		color: #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
	}
}

.chooseImg {
	height: 320rpx;
	background: rgba(255, 255, 255, 0.79);
	border-radius: 15rpx;
	margin: 0 28rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;

	.chooseBtn {
		width: 150rpx;
		height: 150rpx;

		image {
			width: 150rpx;
			height: 150rpx;
		}
	}

	.chooseTxt {
		font-weight: bold;
		font-size: 30rpx;
		color: #2E2E2E;
		margin-top: 35rpx;
	}
}

<script>
	import jsQR from "jsqr";
	export default {
		data() {
			return {
				sn: '', //设备编号
				canvasWidth: 0,
				canvasHeight: 0,
			}
		},
		methods: {
			chooseImage() {
				uni.chooseImage({
					sourceType: ['album'],
					count: 1,
					success: (res) => {
						this.decodeQRCode(res.tempFilePaths[0])
					},
				})
			},
			decodeQRCode(imagePath) {
				uni.getImageInfo({
					src: imagePath,
					success: (imageInfo) => {
						this.canvasWidth = imageInfo.width
						this.canvasHeight = imageInfo.height
						const canvasId = "qrcodeCanvas";
						const ctx = wx.createCanvasContext(canvasId);
						ctx.drawImage(imagePath, 0, 0, imageInfo.width, imageInfo.height);
						ctx.draw();
						uni.showLoading({
							mask:true,
							title:'识别中...'
						})
						setTimeout(() => {
							this.process()
							uni.hideLoading()
						}, 1000)
					},
					fail: (err) => {
						uni.showToast({
							icon: "none",
							title: "请上传正确的图片",
						});
					},
				});
			},
			process() {
				uni.canvasGetImageData({
					canvasId: "qrcodeCanvas",
					x: 0,
					y: 0,
					width: this.canvasWidth,
					height: this.canvasHeight,
					success: (res) => {
						const decodedResult = jsQR(
							res.data,
							this.canvasWidth,
							this.canvasHeight, {
								inversionAttempts: "dontInvert",
							}
						);
						if (decodedResult) {
							this.sn = this.getSn(decodedResult.data)
							if (!this.sn) {
								this.$common.msg('二维码错误');
								return;
							}
							this.confirm()
						} else {
							uni.showToast({
								icon: "none",
								title: "未识别到二维码",
							});
						}
					},
					fail: (err) => {
						uni.showToast({
							icon: "none",
							title: "未识别到二维码",
						});
					},
				});
			},
			getSn(str) {
				let sn = this.$common.getUrlKey('sn', str)
				if (!sn) {
					this.$common.msg('二维码错误');
					return;
				}
				return sn;
			},
			// 直接调起扫码二维码
			scanSnCode() {
				uni.scanCode({
					success: (res) => {
						this.getSn(res.result)
					}
				})
			},
		}
	}
</script>

参考案例：https://blog.csdn.net/weixin_47124112/article/details/137550864